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的直接路徑? 相對路徑??都不是
如果你不想使用Layui，而只是想使用layer，你可以去layer獨立元件官網下載元件包。你需要在你的頁面引入jQuery1.8以上的任意版本，並引入layer.js。
<script src="jQuery的路徑"></script>
<script src="layer.js的路徑"></script>
<script>
//
title - 標題
型別：String/Array/Boolean，預設：'資訊'
title支援三種類型的值，若你傳入的是普通的字串，如title :'我是標題'，那麼只會改變標題文字；若你還需要自定義標題區域樣式
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(){}，以此類推。如：
1 //eg1 2 layer.confirm('納尼？', { 3 btn: ['按鈕一', '按鈕二', '按鈕三'] //可以無限個按鈕 4 ,btn3: function(index, layero){ 5 //按鈕【按鈕三】的回撥 6 } 7 }, function(index, layero){ 8 //按鈕【按鈕一】的回撥 9 }, function(index){ 10 //按鈕【按鈕二】的回撥 11 }); 12 13 //eg2 14 layer.open({ 15 content: 'test' 16 ,btn: ['按鈕一', '按鈕二', '按鈕三'] 17 ,yes: function(index, layero){ 18 //按鈕【按鈕一】的回撥 19 } 20 ,btn2: function(index, layero){ 21 //按鈕【按鈕二】的回撥 22 23 //return false 開啟該程式碼可禁止點選該按鈕關閉 24 } 25 ,btn3: function(index, layero){ 26 //按鈕【按鈕三】的回撥 27 28 //return false 開啟該程式碼可禁止點選該按鈕關閉 29 } 30 ,cancel: function(){ 31 //右上角關閉回撥 32 33 //return false 開啟該程式碼可禁止點選該按鈕關閉 34 } 35 });View Code
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頁的選擇器
1 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彈出框的方法(程式碼週一給出, 現在手頭沒有程式碼)：