在網(wǎng)站開發(fā)中經(jīng)常會用到模態(tài)窗口，如果直接利用javascirpt的window.showModalDialog()打開一個模式窗口，雖然實現(xiàn)了模式窗口的功能，但十分的不好看。當我們遇到這樣的需求時很多人會從網(wǎng)上尋找這些jQuery的模態(tài)對話框，有時候搜索了很多，但都不是很合適，那為什么人們喜歡模態(tài)窗口呢？那模態(tài)窗口到底有什么優(yōu)點呢？

當一個模態(tài)窗口包含一個較小的元素時，用戶并不需要加載一個完成的全新新頁面就可以訪問它。（達到同樣效果的另一種方式來是使用基于AJAX的標簽） 。 通過模態(tài)窗口，您提高網(wǎng)站的可用性。一次又一次的加載網(wǎng)頁是會令大多數(shù)用戶感到煩擾，因此避免這種狀況絕對是一件好事。 模態(tài)窗口也可以為您以節(jié)省空間通過避免使用不需要出現(xiàn)在主頁面的大元素。 例如，您只需提供一個鏈接，縮略圖或某種按鈕， 而不是把完整的視頻的放在網(wǎng)頁上。

今天我收集31個jQuery的模態(tài)對話框插件。這個集合涵蓋了所有的模態(tài)窗口插件，下次遇到這樣的問題你可以直接作為參考，來幫助你創(chuàng)建良好的頁面。

SimpleModal

SIMPLEMODAL是一個創(chuàng)建模態(tài)窗口的小插件，只需要幾行代碼就能夠創(chuàng)建警告或確認對話框消息。它可以工作在異步模式下，從外部頁面或本身的頁面加載內(nèi)容。
Dialog

這個插件使用jQuery UI CSS框架風(fēng)格的外觀，所以我們看起來他的顏色和背景紋理那么好看。建議您使用ThemeRoller工具來創(chuàng)建和下載自定義主題，以便于維護。

noty

noty是一個jQuery插件，他可以很容易創(chuàng)建成功 - 錯誤 - 警告等對話框

ThickBox

ThickBox是一個基于JQuery類庫的擴展，它能在瀏覽器界面上顯示非常棒的UI框， 它可以顯示單圖片，多圖片，ajax請求內(nèi)容或鏈接內(nèi)容.

TinyBox 2

作為TinyBox的升級版本。TinyBox支持iframes和圖像本身。ThickBox 的多功能性包括(圖片,iframed 的內(nèi)容,內(nèi)嵌的內(nèi)容,AJAX 的內(nèi)容).展示單一圖片（single image）展示圖片集（multiple images）展示內(nèi)嵌內(nèi)容（inline content）展示被iFrame的內(nèi)容（iframed content）展示AJAX內(nèi)容（AJAX content）其他：教程本身還自帶了一個很酷的JS跳轉(zhuǎn)腳本ThickBox 能隱藏 Windows IE 6 里的元素.ThickBox 能在使用者滾動頁面或改變?yōu)g覽器窗口大小的同時始終保持居中. 點擊圖片, 覆蓋層, 或關(guān)閉鏈接能移除 ThickBox.

leanModal.js

jQuery Impromptu

mpromptu是一個界面相當友好的jQuery信息提示對話框插件，讓你的網(wǎng)站提升用戶體驗。Impromptu不僅 僅是alert、prompt和confirm的替代品，它還具有其他更強大的功能，可以在對話框中創(chuàng)建form表單。此插件的定制性也很高，可以使用自 定義的CSS樣式來改變對話框的外觀效果，從而讓你網(wǎng)站的界面顯得更加精致。。

登錄框的模態(tài)對話框CSS和jQuery

SimpleDialog

SimpleDialog的目標是替代javascript.dialog(),方便開發(fā)人員更加便捷的開發(fā)出精美的對話框。

jQuery PopBox

Reveal

他是跨瀏覽器兼容性良好的輕量級只有1.75KB的插件。這意味著它的反應(yīng)速度快，如果是小型項目值得推薦

Facebox

Facebox是一個基于jQuery，F(xiàn)acebook-style的lightbox。能夠展示示images，divs或者整個遠程頁面。它使用簡單.

Lightbox_me

Lightbox_me 是jQuery的開發(fā)人員一個必不可少的工具。Lightbox_me是一個非常簡單的Lightbox。當瀏覽器窗口變化時，模式窗口會自動調(diào)整大小。它能夠很好的處理好大部分瀏覽器邊界問題，如窗口調(diào)整或窗口比模式對話框小等情況。

jQuery popBox

popBox是一個使用簡單的jQuery插件，用于擴展文本輸入框的功能。當文本框獲得焦點時，將彈出一個模式對話框讓用戶可以在更大的區(qū)域中輸入內(nèi)容。。

SimpleModal

SimpleModal是一個輕量級jQuery插件提供一個用于創(chuàng)建模式對話框的強大框架。由于是一個框架，它可以給予你極大的靈活性來構(gòu)建你想要的任意模式對話框。。

NyroModal V2

jQuery BlockUI插件

jQuery BlockUI插件可以讓你使用ajax模擬同步行為，而不用鎖定瀏覽器。當被激活時，它會阻止用戶當前的活動（或頁面的一部分），直到它被停用。當要執(zhí)行某個較長操作時候，通過 blockUI來阻止當前用戶繼續(xù)操作。構(gòu)建一個彈出模態(tài)窗口使用了jQuery的Reveal插件

ColorBox:一個輕量級的可定制的燈箱jQuery插件

Messi

Messi是一個干凈，優(yōu)雅的消息顯示jQuery插件。

Facebook的風(fēng)格的確認框

jQuery YouTube上彈出播放器插件

這是一個易于使用的jQuery插件，在彈出的對話框中顯示嵌入YouTube視頻。jQuery用戶界面對話框是一個強大的跨瀏覽器插件顯示一個彈出對話框，標題欄，包括一個可移動的模態(tài)行為機制。

這是插件非常簡單的配置和使用。YouTube視頻ID存儲在任何的DOM元素的屬性。這個插件可以跟蹤所有已分配的彈出事件，并不會分配的click事件，如果已經(jīng)存在，這樣可以重新分配，而不會影響現(xiàn)有的動態(tài)添加HTML元素的事件。這個插件將自動獲得來自YouTube的視頻標題上顯示的對話框的標題欄。

Boxy

boxy 是一個用來實現(xiàn)類似 Facebook 風(fēng)格的提示對話框的jQuery插件，包括：提示、確認等。支持拖拉、改變大小、Ajax數(shù)據(jù)加載等功能。

bPopup

很棒的一個jquery彈出層插件,可以實現(xiàn)彈出層背景變暗效果,自定義彈出層在瀏覽器中的位置.談出談入彈出效 果,ajax加載內(nèi)容,iframe加載內(nèi)容,彈出對話框效果等.bPopup已經(jīng)過測試，兼容IE6到9，F(xiàn)F2-7， Opera9-10，Safari 4-5和Chrome 4-15。

modalPopLite

這是jQuery的超輕量級，超簡單的彈出對話框 - 1.5KB。它支持背景和圓潤的邊角，，沒有復(fù)雜的功能。

在jQuery中創(chuàng)建一個彈出式窗口div

如何創(chuàng)建一個jQuery確認對話框更換

jqModal

jqModal是jQuery的一個插件，用來在瀏覽器中顯示通知，對話框和模型窗口。它簡直如瑞士軍刀一般靈活和小巧，而且它為通用目的窗口框架奠定了基礎(chǔ)。。

Zebra_Dialog

Zebra_Dialog是一個可靈活配置的對話框jQuery插件，大小只有4KB，要求jQuery 1.5.2+支持。可用于替換JavaScript原始的“alert” 和“confirmation”對話框。這個插件使用jQuery Plugin Boilerplate構(gòu)建。

總結(jié)

以上是生活随笔為你收集整理的31个jQuery模态Modal对话框插件推荐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。