14个jQuery Modal对话框

显示快捷的信息给用户的一个好方法是使用jQuery模态对话框或窗口。 对话框还可以用来提醒他们警告,错误多。 如果做得正确,很好看的对话框可以是一个简单的方法来使您的网站的感觉没有很多额外的工作更加现代化。

许多框架,如Twitter的引导Zurb基金会 ,将包括模态和对话。 但是,如果你想要的是一个非常好看的,易于使用的模态窗口不用从头滚动您自己,有很多图书馆都来帮助你。

这里有一些模式对话框的你,享受!

更新2013年12月12日:更新了这篇文章的所有插件和附加演示的新形象。 删除丢失的插件和添加新的。 现在有18分体面的。

更新2016年3月10日:插件列表已完全更新和刷新。 如果你还没有使用jQuery,跳到对于不要求它JavaScript库的奖金部分!

1. VEX

轻松的风格,高度可配置的,和移动准备好了,烦恼是一种乐趣使用。 开始使用你的项目VEX作为一个简单的插入式更换,无需与其他库或插件冲突的你可能已经安装。 给你的网站,现代的外观。

14个jQuery Modal对话框

首页/演示 | GitHub上

2. animatedModal.js

animatedModal.js是一个jQuery插件来创建CSS3过渡全屏模式。 您可以使用转换从animate.css或创建自己的过渡。

14个jQuery Modal对话框

首页/演示 | GitHub上

3. Remodal

Remodal是一个负责任的,重量轻,完全可定制的模态窗口插件与声明的配置和散列跟踪。 您还可以定义背景容器的模式(以创建效果,如模糊)。 它还支持IE8。

14个jQuery Modal对话框

首页/演示 | GitHub上

4. Avgrund莫代尔

寻找的东西有点不同? Avgrund可能有你覆盖。 默认设置创建一个独特的效果,不仅增加了动画模态,但网页本身,创造优雅深度的幻觉。 看看它的外观的最好方法是在低于自己的链接,查看演示。

14个jQuery Modal对话框

首页/演示 | GitHub上

5. noty

谁说过情态动词需要为中心? 对于noty默认值是与屏幕的顶部(与能力容易地设定各种姿势)齐平。 其他的模态对话框可以达到这个效果,所以这不一定是唯一的,但noty使得它很容易配置。

14个jQuery Modal对话框

首页/演示 | GitHub上

6.精益模态

如果你是使用jQuery,但仍想要的东西重量轻,精益模态是精益和均值。 在只有1KB,没有多余的CSS,你会很难察觉精益莫代尔是存在的。

14个jQuery Modal对话框

首页/演示 | GitHub上

7. jQuery的被弹

厌倦了去弹出? 尝试弹出下来了变化。 jQuery的弹下的默认,只有,动漫进来从顶部进入我们的名单。 它缺乏文档和可定制性是什么,它弥补了简单性。

14个jQuery Modal对话框

首页/演示 | GitHub上

8. jQuery的用户界面对话框

jQuery UI的是一个很好的支持,用途广泛,可轻松定制的,轻量级的基于jQuery前端框架。 整个框架包括的不仅仅是模态更加多,但如果你正在寻找的对话框,框架的每个模块可以很容易地单独地从使用下载页面

14个jQuery Modal对话框

首页/演示 | GitHub上

9.彩盒

设计为一个灯箱插件来显示图像,可以彩盒优雅满足一个收藏夹和一个模态对话系统的需求。

14个jQuery Modal对话框

首页/演示 | GitHub上

10. BlockUI

虽然这个名单上的每一个插件能够阿贾克斯,BlockUI是专为它。 它允许开发人员使用Ajax来模拟同步行为,不锁定浏览器。 BlockUI添加元素的DOM给它的外观和阻塞的用户交互的行为。

14个jQuery Modal对话框

首页/演示 | GitHub上

11. jQuery的模态

对于什么是创意的命名缺乏,它弥补了在浏览器的支持。 该文件要求,甚至支持基于文本浏览器山猫 但是,不要被迷惑,jQuery的模态不是jQuery的项目的一部分。

14个jQuery Modal对话框

首页/演示 | GitHub上

12. nyroModal

你喜欢定制? 好吧,让我来介绍nyroModal。 许多这个名单上的其他插件,允许定制了很多,但nyroModal是围绕允许开发了大量的*,甚至下降到动画。

14个jQuery Modal对话框

首页/演示 | GitHub上

13. jqModal

在只有大约375行代码,包括注释,源代码jqModal是很基本的,简单的。 使其成为一个伟大的选择,如果你想深入到源代码自己。

14个jQuery Modal对话框

首页/演示 | GitHub上

14.斑马对话

在斑马默认平坦的主题看起来棒极了,但随意定制自己的!

14个jQuery Modal对话框

首页/演示 | GitHub上

奖励:rmodal

想要的东西,不使用jQuery,但仍是lighweight和看上去很不错? 您可能已经发现你正在寻找的人。 即将在3KB和没有jQuery的扶养,rmodal是我们的名单上最轻便的选择。

14个jQuery Modal对话框

首页/演示 | GitHub上

奖励:SweetAlert

SweetAlert可能不是我们的17KB名单上最轻便的模式,但它是最流行的。 然而,它并不需要jQuery的。 如果您的网站是小,你考虑的jQuery的唯一原因是添加一个对话框,17KB比整个jQuery库可以是几百个千字节的小得多。 甜警报也看起来真的很棒。

14个jQuery Modal对话框

首页/演示 | GitHub上

From: https://www.sitepoint.com//14-jquery-modal-dialog-boxes/