快速的給用戶顯示信息的一個方式是使用 jQuery 模態(tài)彈出框或者窗口。彈出框可以用來給用戶顯示警告、錯誤等信息。如果使用方法正確的話，彈出框可以使你的網站看起來更加的現(xiàn)代化。
很多的框架，如 Bootstrap 和 Foundation ，都提供了模態(tài)框和對話框。然而，如果你不想從頭開始，卻又想使用好看的、易用的彈出框，這里列出的或許會對你有所幫助。
推薦閱讀：《10款非常棒的JavaScript消息通知插件》
1. vex
樣式簡單、高度定制以及移動端友好，使得 vex 是非常好用的。在你的項目中使用 vex 僅僅需要把它放進去，不會和你項目中的其他插件或庫起任何沖突。它會使你的網站看起來更加現(xiàn)代化。
2. animatedModal.js
animatedModal.js 是使用 CSS3 的 transitions 創(chuàng)建全屏模態(tài)彈出框的 jQuery 插件。你可以使用 animate.css 中的動畫，或者創(chuàng)建自己的動畫。
3. Remodal
Remodal 是一個響應式、輕量級、高度可定制化的模態(tài)窗口插件，你可以創(chuàng)建一個背景容器（以便創(chuàng)建效果，如模糊），它支持 IE8。
4. Avgrund Modal
你想尋找一些不同的東西？Avgrund 可能會滿足你的要求。默認的配置不僅會為彈出框創(chuàng)建一個獨特的動畫效果，還會影響到頁面本身，給你一種優(yōu)雅的深度錯覺。最好的體驗方式是點擊下面的演示親自實驗一下。
5. noty
誰說彈出框必須位于頁面中心的？noty 默認就是位于頁面頂部的（提供了多種選項來設置位置）。其他彈出框也可以達到這樣的效果，所以它并不是唯一的，但 noty 使得它更容易配置。
6. Lean Modal
如果你使用 jQuery，但仍想使用一個輕量級的，Lean 會是你想要的。只有 1KB，不需要額外的 CSS，你幾乎不會注意到它的存在。
7. jQuery Popdown
厭倦了向上彈出？可以試試向下的彈出框。jQuery Popdown 默認的，也是唯一的動畫是從頂部進入我們的頁面。它的缺點是文檔和可定制性，但簡單彌補了這些不足。
8. jQuery UI Dialog
jQuery UI 也是一個支持很好、應用廣泛、容易定制、輕量級的基礎前端框架?？蚣鼙旧沓藦棾隹蜻€包含很多其他的，但如果你只想使用彈出框，框架的每個模塊也都是可以輕松的分開使用的，你可以在 下載 頁面獲取。
9. Colorbox
最初設計來展示圖片的燈箱效果的，但 Colorbox 也可以同時滿足燈箱效果和彈出框效果。
10. BlockUI
雖然本文列出的插件都可以滿足 Ajax 使用條件，但 BlockUI 本身就是為 Ajax 創(chuàng)建的。它允許開發(fā)者模擬同步行為，而不需鎖定瀏覽器。
11. jQuery Modal
缺乏創(chuàng)造性的命名，但瀏覽器支持性彌補了這個不足。文檔聲稱甚至支持基于文本的瀏覽器 Lynx。但是不要混淆，jQuery Modal 并不是 jQuery 項目的一部分。
12. nyroModal
你喜歡定制嗎？好的，那我給你介紹 nyroModal。這個列表中的很多插件都支持定制，但 nyroModal 設計的目的就是給開發(fā)者很大的自由，甚至包括動畫。
13. jqModal
包括注釋在內只有大約 375 行代碼，jqModal 的源代碼是非常基礎和簡單的。如果你想深入挖掘源代碼的話，這是一個很好的選擇。
14. Zebra Dialog
Zebra 自帶的扁平化主題非常的棒，你也可以定制自己的。
15. rmodal
想使用不需要依賴 jQuery、輕量級且好看的彈出框？這個應該會滿足你的需求。它大約只有 3KB，并且不需要 jQuery 依賴，rmodal 可能是我們這個列表中最輕量級的選項了。
16. SweetAlert
SweetAlert 有 17KB，不是列表中最輕量級的，但它卻是最流行的。它不需要 jQuery。如果你的站點很小，并且使用 jQuery 唯一的目的就是使用彈出框，那該插件的 17KB 遠比 jQuery 的幾百 KB 要小得多。Sweet Alert看起來也非常的棒。
via：sitepoint.com，本文由 Specs 翻譯整理，發(fā)布在 WEB資源網
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網站，并且能夠搭建符合百度排名規(guī)范的網站基底，使您的網站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網站建設。