模态窗口和非模态窗口_10个免费JavaScript模态窗口插件

您可以找到很多纯CSS模态，但是它们不提供与JavaScript相同的控件 。 使用JavaScript模式 ，您可以添加自定义动画，UI输入并真正增强用户体验。

但是，为什么可以使用JS库时从头开始设计某些东西？ 我在这里收集了最好的免费JavaScript驱动的模式脚本 ，供您仔细阅读并挑选出自己的最爱。

所有这些都是完全免费和开源的 ，因此您可以编辑代码并根据需要重新设置它们的样式以适合您的网站。

1.

我最喜欢的免费模式脚本之一是Tingle.js 。 它基于没有依赖关系的普通JavaScript构建 ，因此您不需要任何jQuery或Zepto库。

另外，尽管它有很多自定义选项 ，但它是一个很小的库。 您只需更改几个设置，即可更改CSS过渡，JavaScript模态动画以及整个用户体验。

Tingle.js被设计为具有完全可访问性和响应能力 ，因此它可在移动设备上运行并支持较旧的浏览器。

您可以在GitHub上查看所有文档以及免费的源代码。 他们也有一个演示链接，因此您可以查看运行中的Tingle，以了解它是否适​​合您的网站。

2.

这是我最近才发现的一种模式， 比大多数模式都简单得多 。 Vanilla Modal秉承其名称，以纯香草脚本支持模式，以及CSS过渡 。

这个东西很小，而且非常灵活，可以使用自定义CSS重设windows的样式 。 它还具有许多可以使用JavaScript进行更改的选项 ，使其非常适合运行DOM函数甚至回调函数。

窥视演示页面以查看默认样式。 这是一个非常基础的设计，因此需要定制才能在生产现场使用它 。 但这也减少了总代码需求，因此它是最薄JavaScript模态库之一 。

3.

如果您想要一个非常简单的脚本，我强烈建议使用plainModal 。 它基于jQuery构建 ，但它是可用的最小的模式脚本之一 。

它不使用任何外部CSS或图像文件 。 您只需要一个JS脚本。

将plainModal脚本添加到页面后，只需将模式按钮作为目标，就可以了。 这使您可以控制显示以及要更改模式界面的数量。

另外，您可以使用一行JavaScript来设置模式，并保持该插件的简约主题。

4.

不可否认，网络上的可访问性非常庞大 。 每个设计师的目标应该是让世界各地的人们在各种设备上并且可能会有局限性，从而获得更具包容性的体验 。

使用Modaal ，您将获得完美的体验， 该体验通过了WCAG 2.0测试，并具有可靠的AA可达性等级 。 您可以在主页上看到一个出色的示例，以及一些代码文档。

总体而言，我向真正关心可访问性的任何人推荐该香草JavaScript插件。 在某些Web项目上可能需要AA等级，因此Modaal是保存书签的非常方便的脚本。

5.

Scotch.io的开发团队为编码人员发布了教程和指南。 他们的工作令人难以置信，它确实在托管在Scotch GitHub上的JavaScript模式脚本中显示。

该模态由Ken Wheeler开发，如果您想学习它的工作原理，该脚本甚至包含完整的教程 。 但是，对于大多数开发人员来说，免费代码就足够了，因为这是超轻量级的，并且易于设置 。 没有依赖关系，甚至是CodePen上的示例演示 。

6.

启动新Web项目的最快方法是通过Bootstrap 。 这是一个功能强大的前端框架，它鼓励开发人员为库创建自己的附件 。

一个这样的示例是Bootbox.js ，这是一个小型JavaScript库， 专门为Bootstrap中的模式窗口设计 。 它实际上适用于对话框 ，用户可以根据您的请求单击“确定”或取消。

就像警报框一样，典型JavaScript对话框非常糟糕。 Bootbox脚本为在BS3 / BS4生态系统中工作的任何人提供了可靠的替代方案 。

再次，它是完全免费和开源的 ，还有冗长的文档页面 ，可帮助您快速入门和运行。

7.

如果您需要更多定制的解决方案，请查看iziModal.js 。 该工具具有充分的响应能力 ，旨在完美地在所有现代浏览器中运行 。

我还没有找到提供这种美观设计的另一个模式脚本。 它以华丽的UI进入了大门， 它可以融合到几乎任何网站中 。 但是，您也可以根据需要调整设计样式 。

请注意，此插件确实可以在jQuery上运行 ，因此它是这里有依赖项的少数插件之一。 但是，如果您要使用iziModal样式，那么为这种时尚的弹出窗口付出的代价很小。

8.

可以对其进行编程，以基于各种属性自动绑定某些HTML元素 。 它还支持键盘快捷键，例如ESC，用于关闭窗口。

总共，该插件的大小不到1KB ，并且可以在您可以想象的所有浏览器中使用 。 jQuery开发人员应保留此插件，以便快速访问简单的模态脚本，而无需多余的装饰。

9.

回到香草JavaScript，我们有了PicoModal库 。 这可能是您发现的最小的脚本之一，并且被设计为可以在原始JavaScript主干上完美运行 。

它支持所有现代浏览器 ，包括Android的移动浏览器和iOS的移动Safari。 它甚至支持可追溯到IE7的旧版IE浏览器！

PicoModal的开发人员创建了一个小的JSfiddle脚本来演示其工作原理。 这是一个非常小的示例，它与click事件或其他事件无关，但是编写一些切换按钮以正确运行此模式窗口并不难。

10.

Avgrund可能是此列表中最独特的模式之一。 它使用自定义页面淡入淡出效果以及缩小的动画使模态右视图可见。

并不是每个人都会喜欢这个动画，所以我不能说这个脚本适合每个网站。 但是，这是一个纯粹的原始模式 ， 只需CSS和JavaScript文件即可轻松设置。

查看演示页面以了解其运行方式。 它肯定具有独特的风格，并且一定会吸引那些可以正常使用的自定义动画。

最后的话

无论您要寻找什么，我敢打赌，此列表中有一些适合您的需求。 但是，如果您仍然不满意， 请在GitHub上浏览相关的模式脚本，然后查看还能找到什么。

翻译自: https://www.hongkiat.com/blog/best-free-javascript-modal-window-plugins/