快速的给用户显示信息的一个方式是使用jQuery模态弹出框或者窗口。弹出框可以用来给用户显示警告、错误等信息。如果使用方法正确的话,弹出框可以使你的网站看起来更加的现代化。
很多的框架,如Bootstrap和Foundation,都提供了模态框和对话框。然而,如果你不想从头开始,却又想使用好看的、易用的弹出框,这里列出的或许会对你有所帮助。
样式简单、高度定制以及移动端友好,使得vex是非常好用的。在你的项目中使用vex仅仅需要把它放进去,不会和你项目中的其他插件或库起任何冲突。它会使你的网站看起来更加现代化。
animatedModal.js是使用CSS3的transitions创建全屏模态弹出框的jQuery插件。你可以使用animate.css中的动画,或者创建自己的动画。
Remodal是一个响应式、轻量级、高度可定制化的模态窗口插件,你可以创建一个背景容器(以便创建效果,如模糊),它支持IE8。
你想寻找一些不同的东西?Avgrund可能会满足你的要求。默认的配置不仅会为弹出框创建一个独特的动画效果,还会影响到页面本身,给你一种优雅的深度错觉。最好的体验方式是点击下面的演示亲自实验一下。
谁说弹出框必须位于页面中心的?noty默认就是位于页面顶部的(提供了多种选项来设置位置)。其他弹出框也可以达到这样的效果,所以它并不是唯一的,但noty使得它更容易配置。
如果你使用jQuery,但仍想使用一个轻量级的,Lean会是你想要的。只有1KB,不需要额外的CSS,你几乎不会注意到它的存在。
厌倦了向上弹出?可以试试向下的弹出框。jQueryPopdown默认的,也是唯一的动画是从顶部进入我们的页面。它的缺点是文档和可定制性,但简单弥补了这些不足。
最初设计来展示图片的灯箱效果的,但Colorbox也可以同时满足灯箱效果和弹出框效果。
虽然本文列出的插件都可以满足Ajax使用条件,但BlockUI本身就是为Ajax创建的。它允许开发者模拟同步行为,而不需锁定浏览器。
你喜欢定制吗?好的,那我给你介绍nyroModal。这个列表中的很多插件都支持定制,但nyroModal设计的目的就是给开发者很大的自由,甚至包括动画。
包括注释在内只有大约375行代码,jqModal的源代码是非常基础和简单的。如果你想深入挖掘源代码的话,这是一个很好的选择。
Zebra自带的扁平化主题非常的棒,你也可以定制自己的。
想使用不需要依赖jQuery、轻量级且好看的弹出框?这个应该会满足你的需求。它大约只有3KB,并且不需要jQuery依赖,rmodal可能是我们这个列表中最轻量级的选项了。
SweetAlert有17KB,不是列表中最轻量级的,但它却是最流行的。它不需要jQuery。如果你的站点很小,并且使用jQuery唯一的目的就是使用弹出框,那该插件的17KB远比jQuery的几百KB要小得多。SweetAlert看起来也非常的棒。