SimpleModal是(shì)一(yī / yì ／yí)個(gè)輕量級的(de)jQuery插件，它爲(wéi / wèi)模态窗口的(de)開發提供了(le／liǎo)一(yī / yì ／yí)個(gè)強有力的(de)接口，可以(yǐ)把它當作模态窗口的(de)框架。simpleModal非常的(de)靈活，可以(yǐ)創建你能夠想象到(dào)的(de)東西。并且你還不(bù)需要(yào / yāo)考慮UI開發中跨浏覽器相關問題。下面蘇州網站制作帶大(dà)家一(yī / yì ／yí)起來(lái)了(le／liǎo)解下這(zhè)個(gè)插件。

Eric Martin設計了(le／liǎo)simpleModal插件，并一(yī / yì ／yí)直在(zài)進行改善和(hé / huò)維護。

下載地(dì / de)址：http://www/.ericmmartin.com/projects/simplemodal/

simpleModal提供了(le／liǎo)兩種簡單方法來(lái)調用模态窗口。第一(yī / yì ／yí)種方法是(shì)作爲(wéi / wèi)一(yī / yì ／yí)個(gè)鏈式的(de)jQuery函數。你可以(yǐ)在(zài)一(yī / yì ／yí)個(gè)用jQuery獲取的(de)元素上(shàng)調用modal()函數，之(zhī)後用這(zhè)個(gè)元素的(de)内容來(lái)顯示一(yī / yì ／yí)個(gè)模态窗口。比如：

<pre>$(“#element”).modal();</pre>

第二種方法是(shì)作爲(wéi / wèi)單獨的(de)一(yī / yì ／yí)個(gè)函數使用。通過傳遞一(yī / yì ／yí)個(gè)jQuery對象，DOM元素或純文本（可以(yǐ)包含html）來(lái)創建一(yī / yì ／yí)個(gè)模态窗口。比如：

<pre>$.modal(“<div><h1>simpleModal</h1></div>”)</pre>

以(yǐ)上(shàng)兩種方法都可以(yǐ)接受一(yī / yì ／yí)個(gè)可選參數，比如：

<pre>$(“#element”).modal({options});</pre>

<pre>$.modal(“<div><h1>simpleModal</h1></div>”,{options})</pre>

因爲(wéi / wèi)simplemodal不(bù)僅僅是(shì)一(yī / yì ／yí)個(gè)模态窗口框架，以(yǐ)上(shàng)的(de)兩個(gè)例子(zǐ)隻是(shì)創建非常基本的(de)沒有樣式模态窗口。你也(yě)可以(yǐ)通過外部css，選項對象或兩個(gè)一(yī / yì ／yí)起來(lái)應用樣式，modal overlay、container和(hé / huò)data元素的(de)css選項分别是(shì)：overlaycss、containercss和(hé / huò)datacss，他(tā)們都是(shì)鍵值對（key/value）屬性。SimpleModal爲(wéi / wèi)顯示一(yī / yì ／yí)個(gè)模态框窗口設置了(le／liǎo)必要(yào / yāo)的(de)css，另外它動态地(dì / de)把模态窗口置于(yú)屏幕中間，除非預先使用了(le／liǎo)position參數。

SimpleModal在(zài)内部定義了(le／liǎo)如下css類：simplemodal-overlay，simplemodal-container，simplemodal-wrap（如果内容比container大(dà)，那麽它将自動設置overflow爲(wéi / wèi)auto）和(hé / huò)simplemodal-data。

SimpleModal的(de)closeHTML參數默認聲明一(yī / yì ／yí)個(gè)用于(yú)關閉模态窗口的(de)圖片樣式：modalcloseImg，因爲(wéi / wèi)它被定義在(zài)參數裏面，不(bù)能通過參數來(lái)應用樣式，所以(yǐ)一(yī / yì ／yí)個(gè)外部css定義是(shì)必須的(de)。

關閉模态窗口，simpleModal自動爲(wéi / wèi)模态窗口内class是(shì)simplemodal-close的(de)元素綁定了(le／liǎo)關閉函數。所以(yǐ)隻要(yào / yāo)在(zài)html中添加如下代碼就(jiù)可以(yǐ)關閉窗簾：

<pre><button type=’button’ class=’simplemodal-close’>關閉</button>或者<a href=’#’ class=’simplemodla-close’>關閉</a></pre>

此外，你也(yě)可以(yǐ)通過調用$.modal.close()的(de)方式關閉當前打開的(de)模态窗口。

如果你不(bù)想使用‘simplemodal-close’作爲(wéi / wèi)默認的(de)關閉接口，而(ér)是(shì)想自己定義，那麽你可以(yǐ)修改全局參數，代碼如下：

<pre>$.modal.defaults.closeClass=”modalClose”;</pre>

以(yǐ)上(shàng)代碼将會會class爲(wéi / wèi)“modalCLose”綁定關閉函數。

如果要(yào / yāo)修改多個(gè)默認參數，可以(yǐ)使用如下代碼：

<pre>

$.extend($.modal.defaults,{

closeClass:”modalClose”,

closeHTML:”<a href=’#’>close</a>”

});