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