Layui——layerjs 用法匯總（持續更新）

寫在前面的話：

　　最近做的后台管理界面中有非常多的彈窗提示，其中，便用到了layerjs來實現~ 把遇到的問題都記錄一下吧，以免再次犯難……

---

 入門小示例：http://layer.layui.com/

查看官網文檔：http://www.layui.com/doc/modules/layer.html

文檔里面很詳細地列出了使用方法，配置項等信息，在此我就不贅述了。

一些小的彈窗，可以用 頁面層 實現，而不用iframe:

下面以一個實用的彈窗示例：

1. 頁面層實現的方法：

　　1) 先引入 layer.js 

<script type="text/javascript" src="../js/layer.js"></script>

　　2) 在body的直接層下，加入一段彈窗的代碼：

<div id="city-list-modal" style="display: none;">
       <!-- 你的彈窗布局以及內容代碼 -->
 </div>

　　在頁面放置一個觸發彈窗的按鈕：

<button id="add" type="button">點擊彈窗</button>

　　3) 如何調用，獲取彈窗數據？ 在js中加入如下：

//點擊按鈕
    $("#add").on('click', function() {
        //點擊按鈕時調用layer插件
        layer.open({
            title: '編輯',
            type: 1,
            area: ['505px','300px'],
            btn: ['確定', '取消'],
            scrollbar: false,
            content: $('#city-list-modal') //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
            // 取到彈窗內的數據
　　　　　　　yes: function(index){
　　　　　　　　　　//一些你的操作（其中 $（selector）是彈窗內某個元素），如：
　　　　　　　　　　console.log($(selector).html());
　　　　　　　　　　// 最后關閉彈窗
　　　　　　　　　　layer.close(index);
                // 關閉彈窗后刷新頁面
                location.reload();
            }
        });
    });        

這個彈窗目前是嵌在代碼里面的，樣式還沒有剝離出來，下次有空的時候再把demo地址貼出來吧 。