SimpleModal是一個輕量級的jQuery插件，它為模態窗口的開發提供了一個強有力的接口，可以把它當作模態窗口的框架。simpleModal非常的靈活，可以創建你能夠想象到的東西。并且你還不需要考慮UI開發中跨瀏覽器相關問題。下面蘇州網站制作帶大家一起來了解下這個插件。
Eric Martin設計了simpleModal插件，并一直在進行改善和維護。
下載地址：http://www/.ericmmartin.com/projects/simplemodal/
simpleModal提供了兩種簡單方法來調用模態窗口。第一種方法是作為一個鏈式的jQuery函數。你可以在一個用jQuery獲取的元素上調用modal()函數，之后用這個元素的內容來顯示一個模態窗口。比如：
<pre>$(“#element”).modal();</pre>
第二種方法是作為單獨的一個函數使用。通過傳遞一個jQuery對象，DOM元素或純文本（可以包含html）來創建一個模態窗口。比如：
<pre>$.modal(“<div><h1>simpleModal</h1></div>”)</pre>
以上兩種方法都可以接受一個可選參數，比如：
<pre>$(“#element”).modal({options});</pre>
<pre>$.modal(“<div><h1>simpleModal</h1></div>”,{options})</pre>
因為simplemodal不僅僅是一個模態窗口框架，以上的兩個例子只是創建非常基本的沒有樣式模態窗口。你也可以通過外部css，選項對象或兩個一起來應用樣式，modal overlay、container和data元素的css選項分別是：overlaycss、containercss和datacss，他們都是鍵值對（key/value）屬性。SimpleModal為顯示一個模態框窗口設置了必要的css，另外它動態地把模態窗口置于屏幕中間，除非預先使用了position參數。
SimpleModal在內部定義了如下css類：simplemodal-overlay，simplemodal-container，simplemodal-wrap（如果內容比container大，那么它將自動設置overflow為auto）和simplemodal-data。
SimpleModal的closeHTML參數默認聲明一個用于關閉模態窗口的圖片樣式：modalcloseImg，因為它被定義在參數里面，不能通過參數來應用樣式，所以一個外部css定義是必須的。
關閉模態窗口，simpleModal自動為模態窗口內class是simplemodal-close的元素綁定了關閉函數。所以只要在html中添加如下代碼就可以關閉窗簾：
<pre><button
type=’button’ class=’simplemodal-close’>關閉</button>或者<a href=’#’ class=’simplemodla-close’>關閉</a></pre>
此外，你也可以通過調用$.modal.close()的方式關閉當前打開的模態窗口。
如果你不想使用‘simplemodal-close’作為默認的關閉接口，而是想自己定義，那么你可以修改全局參數，代碼如下：
<pre>$.modal.defaults.closeClass=”modalClose”;</pre>
以上代碼將會會class為“modalCLose”綁定關閉函數。
如果要修改多個默認參數，可以使用如下代碼：
<pre>
$.extend($.modal.defaults,{
closeClass:”modalClose”,
closeHTML:”<a
href=’#’>close</a>”
});
2018-02-22
關鍵詞：
3124
電話咨詢
業務咨詢
TOP