layer彈出層詳解

前言：學習layer彈出框，之前項目是用bootstrap模態框，后來改用layer彈出框，在文章的后面，我會分享項目的一些代碼(我自己寫的)。

layer至今仍作為layui的代表作，她的受眾廣泛並非偶然，而是這五年多的堅持，不斷完善和維護、不斷建設和提升社區服務，使得猿們紛紛自發傳播，乃至於成為今天的Layui最強勁的源動力。目前，layer已成為國內最多人使用的web彈層組件，GitHub自然Stars3000+，官網累計下載量達30w+，大概有20萬Web平台正在使用layer。 具體請移步layer官網，http://www.layui.com/doc/modules/layer.html

 

這篇博客會引用官網的一些內容，主要是寫寫layer的一些難點。比如如何用layer打開一個新的網頁，content直接為一個網址就可以了，但是在你的項目中，這個網址又是啥??HTML的直接路徑? 相對路徑??都不是!! layer如何獲取父界面的元素，比如我點擊新增按鈕，在layer框編輯后提交，是如何關閉當前layer框，額，關閉layer框很簡單，但是如何關閉后根據父界面的form表單向后台發起Ajax請求，，刷新信息。即：layer子界面如何調用父界面的方法。

如果你不想使用Layui，而只是想使用layer，你可以去layer獨立組件官網下載組件包。你需要在你的頁面引入jQuery1.8以上的任意版本，並引入layer.js。

<script src="jQuery的路徑"></script>
<script src="layer.js的路徑"></script>
<script>
//彈出一個頁面層
$('#test2').on('click', function(){ layer.open({ type: 1, area: ['600px', '360px'], shadeClose: true, //點擊遮罩關閉
  content: '\<\div style="padding:20px;">自定義內容\<\/div>' }); }); </script>

title - 標題

類型：String/Array/Boolean，默認：'信息'

title支持三種類型的值，若你傳入的是普通的字符串，如title :'我是標題'，那么只會改變標題文本；若你還需要自定義標題區域樣式，那么你可以title: ['文本', 'font-size:18px;']，數組第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false

content - 內容

類型：String/DOM/Array，默認：''

content可傳入的值是靈活多變的，不僅可以傳入普通的html內容，還可以指定DOM，更可以隨着type的不同而不同。譬如：

/!*
 如果是頁面層 */ layer.open({ type: 1, content: '傳入任意的文本或html' //這里content是一個普通的String
}); layer.open({ type: 1, content: $('#id') //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
}); //Ajax獲取
$.post('url', {}, function(str){ layer.open({ type: 1, content: str //注意，如果str是object，那么需要字符拼接。
 }); }); /!*
 如果是iframe層 */ layer.open({ type: 2, content: 'http://sentsin.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
}); /!*
 如果是用layer.open執行tips層 */ layer.open({ type: 4, content: ['內容', '#id'] //數組第二項即吸附元素選擇器或者DOM
}); 

btn - 按鈕

類型：String/Array，默認：'確認'

信息框模式時，btn默認是一個確認按鈕，其它層類型則默認不顯示，加載層和tips層則無效。當您只想自定義一個按鈕時，你可以btn: '我知道了'，當你要定義兩個按鈕時，你可以btn: ['yes', 'no']。當然，你也可以定義更多按鈕，比如：btn: ['按鈕1', '按鈕2', '按鈕3', …]，按鈕1的回調是yes，而從按鈕2開始，則回調為btn2: function(){}，以此類推。如：

//eg1       
layer.confirm('納尼？', {
  btn: ['按鈕一', '按鈕二', '按鈕三'] //可以無限個按鈕
  ,btn3: function(index, layero){
    //按鈕【按鈕三】的回調
  }
}, function(index, layero){
  //按鈕【按鈕一】的回調
}, function(index){
  //按鈕【按鈕二】的回調
});
 
//eg2
layer.open({
  content: 'test'
  ,btn: ['按鈕一', '按鈕二', '按鈕三']
  ,yes: function(index, layero){
    //按鈕【按鈕一】的回調
  }
  ,btn2: function(index, layero){
    //按鈕【按鈕二】的回調
    
    //return false 開啟該代碼可禁止點擊該按鈕關閉
  }
  ,btn3: function(index, layero){
    //按鈕【按鈕三】的回調
    
    //return false 開啟該代碼可禁止點擊該按鈕關閉
  }
  ,cancel: function(){ 
    //右上角關閉回調
    
    //return false 開啟該代碼可禁止點擊該按鈕關閉
  }
});

success - 層彈出后的成功回調方法

類型：Function，默認：null

當你需要在層創建完畢時即執行一些語句，可以通過該回調。success會攜帶兩個參數，分別是當前層DOM當前層索引。如：

layer.open({ content: '測試回調', success: function(layero, index){ console.log(layero, index); } });

yes - 確定按鈕回調方法

類型：Function，默認：null

該回調攜帶兩個參數，分別為當前層索引、當前層DOM對象。如：

layer.open({ content: '測試回調', yes: function(index, layero){ //do something
        layer.close(index); //如果設定了yes回調，需進行手工關閉
 } });

cancel - 右上角關閉按鈕觸發的回調

類型：Function，默認：null

該回調攜帶兩個參數，分別為：當前層索引參數（index）、當前層的DOM對象（layero），默認會自動觸發關閉。如果不想關閉，return false即可，如；

cancel: function(index, layero){ if(confirm('確定要關閉么')){ //只有當點擊confirm框的確定時，該層才會關閉
 layer.close(index) } return false; }

end - 層銷毀后觸發的回調

類型：Function，默認：null

無論是確認還是取消，只要層被銷毀了，end都會執行，不攜帶任何參數。

layer.ready(callback) - 初始化就緒

由於我們的layer內置了輕量級加載器，所以你根本不需要單獨引入css等文件。但是加載總是需要過程的。當你在頁面一打開就要執行彈層時，你最好是將彈層放入ready方法中，如：

//頁面一打開就執行彈層
layer.ready(function(){ layer.msg('很高興一開場就見到你'); }); 

layer.close(index) - 關閉特定層(比較重要)

關於它似乎沒有太多介紹的必要，唯一讓你疑惑的，可能就是這個index了吧。事實上它非常容易得到。

//當你想關閉當前頁的某個層時
var index = layer.open(); var index = layer.alert(); var index = layer.load(); var index = layer.tips(); //正如你看到的，每一種彈層調用方式，都會返回一個index
layer.close(index); //此時你只需要把獲得的index，輕輕地賦予layer.close即可
 
//如果你想關閉最新彈出的層，直接獲取layer.index即可
layer.close(layer.index); //它獲取的始終是最新彈出的某個層，值是由layer內部動態遞增計算的
 
//當你在iframe頁面關閉自身時
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
parent.layer.close(index); //再執行關閉  

layer.getChildFrame(selector, index) - 獲取iframe頁的DOM

當你試圖在當前頁獲取iframe頁的DOM元素時，你可以用此方法。selector即iframe頁的選擇器

layer.open({  2 type: 2,  3 content: 'test/iframe.html',  4 success: function(layero, index){  5 var body = layer.getChildFrame('body', index);  6 var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();  7 console.log(body.html()) //得到iframe頁的body內容  8 body.find('input').val('Hi，我是從父頁來的')  9  } 10 }); 11         

layer.getFrameIndex(windowName) - 獲取特定iframe層的索引

此方法一般用於在iframe頁關閉自身時用到。

//假設這是iframe頁
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
parent.layer.close(index); //再執行關閉

 

封裝好的Layer彈出框與關閉layer彈出框的方法(代碼周一給出, 現在手頭沒有代碼)：