向用户显示快速信息的一种好方法是使用jQuery模态对话框或窗口。 对话框也可以用来警告警告，错误等。 如果做得正确，美观的对话框可以轻松地使您的网站变得更加现代，而无需进行大量额外工作。
许多框架（例如Twitter Bootstrap或Zurb Foundation ）将包括模式和对话框。 但是，如果您想要的只是一个美观，易于使用的模式窗口，而无需从头开始滚动自己的窗口，那么有很多库可以为您提供帮助。
这里有一些模态对话框供您使用！
2013年12月12日更新：更新了本文中的所有插件，并添加了演示的新图像。 删除了缺少的插件并添加了新的插件。 现在有18个像样的。
2016年3月10日更新：插件列表已完全更新和刷新。 如果您还没有使用jQuery，请跳到不需要它的JavaScript库的bonus部分！
1.烦恼
vex易于样式设置，高度可配置且可移动，是一种使用乐趣。 在项目上开始使用vex只是简单的替代品，而不会与您可能已安装的其他库或插件冲突。 为您的网站提供现代外观。
2. animationModal.js
animationModal.js是一个jQuery插件，用于创建具有CSS3过渡的全屏模式。 您可以使用animate.css中的过渡，也可以创建自己的过渡。
3.重塑
Remodal是一个响应式，轻量级且可完全自定义的模态窗口插件，具有声明式配置和哈希跟踪。 您还可以为模式定义背景容器（以便创建诸如模糊之类的效果）。 它还支持IE8。
4. Avgrund Modal
寻找一些不同的东西？ Avgrund可能会覆盖您。 默认设置可创建独特的效果，不仅可以将动画添加到模态中，还可以添加到页面本身，从而优雅地营造出深度感。 查看外观的最佳方法是亲自查看以下链接中的演示。
5.Noty
谁说情态需要居中？ noty的默认设置是与屏幕顶部齐平（具有轻松设置各种位置的功能）。 其他模式对话框可以实现此效果，因此它不一定是唯一的，但noty使得配置非常容易。
6.精益模式
如果您使用的是jQuery，但仍然想要轻量级的东西，那么精益模态是精益和卑鄙的。 仅1kb，没有额外的CSS，您几乎不会注意到Lean Modal。
7. jQuery Popdown
厌倦了弹出？ 尝试弹出以进行更改。 jQuery Popdown的默认（唯一）动画从顶部开始进入我们的列表。 它缺乏文档和可定制性，它可以简化。
8. jQuery UI对话框
jQuery UI是一个受良好支持的，广泛使用的，易于自定义的，轻量级的基于jQuery的前端框架。 整个框架不仅包含模式，还包含更多对话框，但是如果您只需要对话框，那么可以从下载页面轻松地单独使用框架的每个模块。
9.彩盒
Colorbox被设计为用于显示图像的灯箱插件，可以优雅地满足灯箱和模式对话框系统的需求。
10. BlockUI
虽然此列表中的每个插件都可以使用Ajax，但BlockUI是为此构建的。 它允许开发人员使用Ajax模拟同步行为，而无需锁定浏览器。 BlockUI向DOM添加元素，以使其具有阻止用户交互的外观和行为。
11. jQuery模态
对于广告命名方面的不足，它弥补了浏览器的支持。 该文档声称甚至支持基于文本的浏览器Lynx 。 但是，请不要感到困惑，jQuery Modal不是jQuery项目的一部分。
12. nyroModal
你喜欢定制吗？ 好吧，让我介绍一下nyroModal。 此列表中的许多其他插件都允许进行大量的自定义，但是nyroModal的设计旨在使开发人员具有很大的自由度，甚至包括动画。
13. jqModal
源代码jqModal只有大约375行代码（包括注释），非常基本，直接。 如果您想自己深入研究源代码，则使其成为一个不错的选择。
14.斑马对话框
Zebra上的默认平面主题看起来很棒，但是可以随意自定义！
奖励：rmodal
是否想要一些不使用jQuery但仍然轻巧并且看起来不错的东西？ 您可能已经找到了想要的那个。 rmodal以3kb的速度传入并且没有jQuery依赖性，是我们列表中最轻量级的选项。
奖励：SweetAlert
SweetAlert可能不是我们列表中最轻量级的模式（17kb），但它是最受欢迎的。 但是，它不需要jQuery。 如果您的站点很小，而您考虑使用jQuery的唯一原因就是添加一个对话框，那么17kb会比整个jQuery库小得多，后者可能是数百KB。 甜警报也看起来真的很棒。
From: https://www.sitepoint.com/14-jquery-modal-dialog-boxes/
扫一扫
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
