【精品推荐】web开发人员应该知道的31个jQuery模态对话框

在网站开发中经常会用到模态窗口，如果直接利用javascirpt的window.showModalDialog()打开一个模式窗口，虽然实现了模式窗口的功能，但十分的不好看。当我们遇到这样的需求时很多人会从网上寻找这些jQuery的模态对话框，有时候搜索了很多，但都不是很合适，那为什么人们喜欢模态窗口呢？那模态窗口到底有什么优点呢？

当一个模态窗口包含一个较小的元素时，用户并不需要加载一个完成的全新新页面就可以访问它。（达到同样效果的另一种方式来是使用基于AJAX的标签） 。 通过模态窗口，您提高网站的可用性。一次又一次的加载网页是会令大多数用户感到烦扰，因此避免这种状况绝对是一件好事。 模态窗口也可以为您以节省空间通过避免使用不需要出现在主页面的大元素。 例如，您只需提供一个链接，缩略图或某种按钮， 而不是把完整的视频的放在网页上。

今天我收集31个jQuery的模态对话框插件。这个集合涵盖了所有的模态窗口插件，下次遇到这样的问题你可以直接作为参考，来帮助你创建良好的页面。

SimpleModal

SIMPLEMODAL是一个创建模态窗口的小插件，只需要几行代码就能够创建警告或确认对话框消息。它可以工作在异步模式下，从外部页面或本身的页面加载内容。
Dialog

这个插件使用jQuery UI CSS框架风格的外观，所以我们看起来他的颜色和背景纹理那么好看。建议您使用ThemeRoller工具来创建和下载自定义主题，以便于维护。

noty

noty是一个jQuery插件，他可以很容易创建成功 - 错误 - 警告等对话框

ThickBox

ThickBox是一个基于JQuery类库的扩展，它能在浏览器界面上显示非常棒的UI框， 它可以显示单图片，多图片，ajax请求内容或链接内容.

TinyBox 2

作为TinyBox的升级版本。TinyBox支持iframes和图像本身。ThickBox 的多功能性包括(图片,iframed 的内容,内嵌的内容,AJAX 的内容).展示单一图片（single image）展示图片集（multiple images）展示内嵌内容（inline content）展示被iFrame的内容（iframed content）展示AJAX内容（AJAX content）其他：教程本身还自带了一个很酷的JS跳转脚本ThickBox 能隐藏 Windows IE 6 里的元素.ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox.

 

leanModal.js

 

jQuery Impromptu

mpromptu是一个界面相当友好的jQuery信息提示对话框插件，让你的网站提升用户体验。Impromptu不仅 仅是alert、prompt和confirm的替代品，它还具有其他更强大的功能，可以在对话框中创建form表单。此插件的定制性也很高，可以使用自 定义的CSS样式来改变对话框的外观效果，从而让你网站的界面显得更加精致。。

登录框的模态对话框CSS和jQuery

SimpleDialog

SimpleDialog的目标是替代javascript.dialog(),方便开发人员更加便捷的开发出精美的对话框。

jQuery PopBox

 

Reveal

他是跨浏览器兼容性良好的轻量级只有1.75KB的插件。这意味着它的反应速度快，如果是小型项目值得推荐

Facebox

Facebox是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程页面。它使用简单.

Lightbox_me

Lightbox_me 是jQuery的开发人员一个必不可少的工具。Lightbox_me是一个非常简单的Lightbox。当浏览器窗口变化时，模式窗口会自动调整大小。它能够很好的处理好大部分浏览器边界问题，如窗口调整或窗口比模式对话框小等情况。

jQuery popBox

popBox是一个使用简单的jQuery插件，用于扩展文本输入框的功能。当文本框获得焦点时，将弹出一个模式对话框让用户可以在更大的区域中输入内容。。

SimpleModal

SimpleModal是一个轻量级jQuery插件提供一个用于创建模式对话框的强大框架。由于是一个框架，它可以给予你极大的灵活性来构建你想要的任意模式对话框。。

NyroModal V2

jQuery BlockUI插件

jQuery BlockUI插件可以让你使用ajax模拟同步行为，而不用锁定浏览器。当被激活时，它会阻止用户当前的活动（或页面的一部分），直到它被停用。当要执行某个较长操作时候，通过 blockUI来阻止当前用户继续操作。构建一个弹出模态窗口使用了jQuery的Reveal插件

ColorBox:一个轻量级的可定制的灯箱jQuery插件

 

Messi

Messi是一个干净，优雅的消息显示jQuery插件。

Facebook的风格的确认框

jQuery YouTube上弹出播放器插件

这是一个易于使用的jQuery插件，在弹出的对话框中显示嵌入YouTube视频。jQuery用户界面对话框是一个强大的跨浏览器插件显示一个弹出对话框，标题栏，包括一个可移动的模态行为机制。

这是插件非常简单的配置和使用。YouTube视频ID存储在任何的DOM元素的属性。这个插件可以跟踪所有已分配的弹出事件，并不会分配的click事件，如果已经存在，这样可以重新分配，而不会影响现有的动态添加HTML元素的事件。这个插件将自动获得来自YouTube的视频标题上显示的对话框的标题栏。

 

Boxy

boxy 是一个用来实现类似 Facebook 风格的提示对话框的jQuery插件，包括：提示、确认等。支持拖拉、改变大小、Ajax数据加载等功能。

bPopup

很棒的一个jquery弹出层插件,可以实现弹出层背景变暗效果,自定义弹出层在浏览器中的位置.谈出谈入弹出效 果,ajax加载内容,iframe加载内容,弹出对话框效果等.bPopup已经过测试，兼容IE6到9，FF2-7， Opera9-10，Safari 4-5和Chrome 4-15。

modalPopLite

这是jQuery的超轻量级，超简单的弹出对话框 - 1.5KB。它支持背景和圆润的边角，，没有复杂的功能。

在jQuery中创建一个弹出式窗口div

如何创建一个jQuery确认对话框更换

jqModal

jqModal是jQuery的一个插件，用来在浏览器中显示通知，对话框和模型窗口。它简直如瑞士军刀一般灵活和小巧，而且它为通用目的窗口框架奠定了基础。。

Zebra_Dialog

Zebra_Dialog是一个可灵活配置的对话框jQuery插件，大小只有4KB，要求jQuery 1.5.2+支持。可用于替换JavaScript原始的“alert” 和“confirmation”对话框。这个插件使用jQuery Plugin Boilerplate构建。