2018-02-22 關(guān)鍵詞:蘇州網(wǎng)站建設(shè) 蘇州網(wǎng)頁設(shè)計 蘇州網(wǎng)站制作 蘇州網(wǎng)絡(luò)推廣 2883
SimpleModal是一個輕量級的jQuery插件,它為模態(tài)窗口的開發(fā)提供了一個強有力的接口,可以把它當(dāng)作模態(tài)窗口的框架。simpleModal非常的靈活,可以創(chuàng)建你能夠想象到的東西。并且你還不需要考慮UI開發(fā)中跨瀏覽器相關(guān)問題。下面蘇州網(wǎng)站制作帶大家一起來了解下這個插件。
Eric Martin設(shè)計了simpleModal插件,并一直在進行改善和維護。
下載地址:http://www/.ericmmartin.com/projects/simplemodal/
simpleModal提供了兩種簡單方法來調(diào)用模態(tài)窗口。第一種方法是作為一個鏈?zhǔn)降膉Query函數(shù)。你可以在一個用jQuery獲取的元素上調(diào)用modal()函數(shù),之后用這個元素的內(nèi)容來顯示一個模態(tài)窗口。比如:
<pre>$(“#element”).modal();</pre>
第二種方法是作為單獨的一個函數(shù)使用。通過傳遞一個jQuery對象,DOM元素或純文本(可以包含html)來創(chuàng)建一個模態(tài)窗口。比如:
<pre>$.modal(“<div><h1>simpleModal</h1></div>”)</pre>
以上兩種方法都可以接受一個可選參數(shù),比如:
<pre>$(“#element”).modal({options});</pre>
<pre>$.modal(“<div><h1>simpleModal</h1></div>”,{options})</pre>
因為simplemodal不僅僅是一個模態(tài)窗口框架,以上的兩個例子只是創(chuàng)建非?;镜臎]有樣式模態(tài)窗口。你也可以通過外部css,選項對象或兩個一起來應(yīng)用樣式,modal overlay、container和data元素的css選項分別是:overlaycss、containercss和datacss,他們都是鍵值對(key/value)屬性。SimpleModal為顯示一個模態(tài)框窗口設(shè)置了必要的css,另外它動態(tài)地把模態(tài)窗口置于屏幕中間,除非預(yù)先使用了position參數(shù)。
SimpleModal在內(nèi)部定義了如下css類:simplemodal-overlay,simplemodal-container,simplemodal-wrap(如果內(nèi)容比container大,那么它將自動設(shè)置overflow為auto)和simplemodal-data。
SimpleModal的closeHTML參數(shù)默認(rèn)聲明一個用于關(guān)閉模態(tài)窗口的圖片樣式:modalcloseImg,因為它被定義在參數(shù)里面,不能通過參數(shù)來應(yīng)用樣式,所以一個外部css定義是必須的。
關(guān)閉模態(tài)窗口,simpleModal自動為模態(tài)窗口內(nèi)class是simplemodal-close的元素綁定了關(guān)閉函數(shù)。所以只要在html中添加如下代碼就可以關(guān)閉窗簾:
<pre><button
type=’button’ class=’simplemodal-close’>關(guān)閉</button>或者<a href=’#’ class=’simplemodla-close’>關(guān)閉</a></pre>
此外,你也可以通過調(diào)用$.modal.close()的方式關(guān)閉當(dāng)前打開的模態(tài)窗口。
如果你不想使用‘simplemodal-close’作為默認(rèn)的關(guān)閉接口,而是想自己定義,那么你可以修改全局參數(shù),代碼如下:
<pre>$.modal.defaults.closeClass=”modalClose”;</pre>
以上代碼將會會class為“modalCLose”綁定關(guān)閉函數(shù)。
如果要修改多個默認(rèn)參數(shù),可以使用如下代碼:
<pre>
$.extend($.modal.defaults,{
closeClass:”modalClose”,
closeHTML:”<a
href=’#’>close</a>”
});
180 1557 7818
基礎(chǔ)型網(wǎng)站建設(shè)營銷型網(wǎng)站設(shè)計品牌型網(wǎng)站建設(shè)高端定制網(wǎng)站設(shè)計定制系統(tǒng)開發(fā)
細(xì)致入微的前期服務(wù)
精準(zhǔn)的策劃服務(wù)
精湛的網(wǎng)頁設(shè)計
穩(wěn)定 可靠 極速的域名和服務(wù)器
任何問題,24小時回復(fù)并處理
版權(quán)所有:蘇州謝謝網(wǎng)絡(luò)傳媒有限公司 蘇ICP備11087090號