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

Eric Martin設計(jì)了(le)simpleModal插件(jiàn)，并一(yī)直在進行(xíng)改善和(hé)維護。

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

simpleModal提供了(le)兩種簡單方法來(lái)調用(yòng)模态窗(chuāng)口。第一(yī)種方法是(shì∞)作(zuò)為(wèi)一(yī)個(gè)鏈式的(de)jQuery函數(shù)。你(nǐ)可(kě)以在一(yī)個(gè)用(yòng)jQuery獲取的(de)元素上(shàαng)調用(yòng)modal()函數(shù)，之後用(yòng)這(zhè)個(gè)元素的(de)內(nèi)容來(lái)顯示一(yī)個(gè)模态窗(chuāng)口。比如(r↕ú)：

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

第二種方法是(shì)作(zuò)為(wèi)單獨的(de)一(yī)個(gè)函數(shù)使用(yòng)。通(tōng)過傳遞一(yī)個(gè)<jQuery對(duì)象，DOM元素或純文(wén)本（可(kě)以包含html）來(lái)創建一(yī)個(gè)模态窗(cδhuāng)口。比如(rú)：

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

以上(shàng)兩種方法都(dōu)可(kě)以接受一(yī)個(gè)可(kě)選參數(shù)，比如(rú)：

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

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

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

SimpleModal在內(nèi)部定義了(le)如(rú)下(xià)css類：simplemodal-overlay，simplemodal-conta÷iner，simplemodal-wrap（如(rú)果內(nèi)容比container大(dà)，那(nà)麽'它将自(zì)動設置overflow為(wèi)auto）和(hé)simplemodal-data。Ω

SimpleModal的(de)closeHTML參數(shù)默認聲明(míng)一(yī)個(gè)用(yòng)于關閉模态®窗(chuāng)口的(de)圖片樣式：modalcloseImg，因為(wèi)它被定義在參數(shù)裡(lǐ)面，不(bù)能(néng)通(tōng)過參數(shù)來(lá☆i)應用(yòng)樣式，所以一(yī)個(gè)外(wài)部css定義是(shì)必須的(de)。

關閉模态窗(chuāng)口，simpleModal自(zì)動為(wèi)模态窗(chuāng)口內(nèi)class是(shì)simplemodal-close 的(de)元素綁定了(le)關閉函數(shù)。所以隻要(yào)在html中添加如(rú)下(xià)代碼就(jiù)可(kě)以關閉窗(chuāng)簾：

<pre><button type=’button’ class=’simplemodal-close’&gφt;關閉</button>或者<a href=’#’ class=’simplemodla-clos₹e’>關閉</a></pre>

此外(wài)，你(nǐ)也(yě)可(kě)以通(tōng)過調用(yòng)$.modal.close÷()的(de)方式關閉當前打開(kāi)的(de)模态窗(chuāng)口。

如(rú)果你(nǐ)不(bù)想使用(yòng)‘simplemodal-close’作(zuò)為(wèi)默認的(de)關閉接口，¶而是(shì)想自(zì)己定義，那(nà)麽你(nǐ)可(kě)以修改全局參數(shù)，代碼如(rú)下(xià)：

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

以上(shàng)代碼将會(huì)會(huì)class為(wèi)“modalCLose”綁定關閉函數(shù)。

如(rú)果要(yào)修改多(duō)個(gè)默認參數(shù)，可(kě)以使用(yòng)如(rú)下(xià)代碼：‍

<pre>

$.extend($.modal.defaults,{

closeClass:”modalClose”,

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

});