jQuery學習筆記（jquery.simplemodal插件）

官網地址：http://www.ericmmartin.com/

SimpleModal是一個輕量級的jQuery插件，它為模式窗口的開發提供了一個強有力的接口，可以把它當作模式窗口的框架。SimpleModal非常的靈活，可以創建你能夠想像到的任何東西，並且你還不需要考慮UI開發中的跨游覽器相關問題。

好像simplemodal1.4.4版本在jQuery2.0上運行有些問題。我的測試結果是IE 10版本中不能正常運行，但在Firefox 23版本與chrome 27版本中運行正常。然后把jQuery版本降到1.9.0后就一切正常了。

1. 如何調用？

1.1 打開模式窗口

SimpleModal提供了兩種簡單方法來調用模式窗口。

第一種方法是作為一人鏈式的jQuery函數。你可以在一個用jQuery獲取的元素上調用modal()函數，之后用這個元素的內容來顯示一個模態窗口。比如：

$.modal(#element-id").modal();

第二種方法是作為一個單獨函數使用。通過傳遞一個jQuery對象，DOM元素或純文本（可以包含HTML）來創建一個模態窗口。比如：

$.modal("<div><h1>SimpleModal<h1></div>");

以上兩種方法都可以接受一個可選參數，比如：

$.("#element-id").midal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});

1.2 關閉模態窗口

SimpleModal自動為模式窗口內class是“simplemodal-close“的元素綁定了關閉函數。所以只要在HTML中添加如下代碼就可以關閉窗口：

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

2. 示范一（簡單提示模式窗口）

2.1 引用CSS與JS文件

<!-- CSS files -->
<link type='text/css' href='../../css/basic.css' rel='stylesheet' />
<link type='text/css' href='../../css/box.css' rel='stylesheet' />

<!-- Load jQuery, SimpleModal JS files -->
<script type="text/javascript" src="../../js/jquery.js" ></script>
<script type="text/javascript" src="../../js/jquery.simplemodal.js"></script>

2.2 創建彈出框層

    <div id="basic-dialog-ok">
        <!-- 普通彈出層 [[ -->  
        <div class="box-title show"><h2>提示</h2></div>  
        <div class="box-main">
            <div class="tips">      
                <span class="tips-ico">
                    <span class="ico-ok"><!-- 圖標class可以為： ico-ok , ico-error , ico-info , ico-question , ico-warn , ico-wait --></span>
                </span>      
                <div class="tips-content">        
                    <div class="tips-title">申請成功，我們將短信通知您！</div>        
                    <div class="tips-line"></div>     
                </div>    
            </div>
            <div class="box-buttons"><button type="button" class="simplemodal-close">關 閉</button></div>
        </div>  
        <!-- 普通彈出層 ]] -->
    </div>

2.3 創建JS腳本調用

$(function () {
    /* 提示框 */
    $('.open-basic-dialog-ok').click(function (e) {
        $('#basic-dialog-ok').modal();
        return false;
    });
});

2.4 調用HTML部分

<p>提示框-ok：
<input type='button' name='basic' value='Demo' class='open-basic-dialog-ok'/>
或者
<a href='#' class='open-basic-dialog-ok'>Demo</a></p>

這樣單擊按鈕，或者是超鏈接，都會出現OK提示框。效果如下圖：

3. 示范二（打開一個iframe，顯示一個頁面）

3.1 引用CSS與JS文件

參考引用CSS與JS文件

3.2 創建彈出框層

    <div id="ifr-dialog" >
        <!-- iframe彈出層 [[ -->  
        <iframe frameborder="0" scrolling="no" id="ifr-dialog-container" src="javascript:;" class="box-iframe"></iframe>
        <!-- iframe彈出層 ]] -->
    </div>

3.3 創建JS腳本調用

$(function () {
    $('.open-basic-ifr').click(function (e) {
        showIframe("http://www.baidu.com","ifr-dialog-content");
        return false;
    });
});

/* eg:showIframe */
function showIframe(src , id ){
    $("#ifr-dialog-container").attr("src",src);
    $('#ifr-dialog').modal({opacity:30,"overlayClose":true,"containerId":id });
}

3.4 調用HTML部分

<p>彈出iframe：
<input type='button' name='basic' value='Demo' class='open-basic-ifr'/>
或者
<a href='#' class='open-basic-ifr'>Demo</a></p>

這樣單擊按鈕，或者是超鏈接，都會出現iframe提示框。效果如下圖：

4. 示范三（彈出一個發送郵件的頁面）

其效果如下圖所示，因為代碼過於復雜，建議直接下載源代碼自己分析。

下載地址參考：http://www.ericmmartin.com/projects/simplemodal-demos/