前言：學(xué)習(xí)layer彈出框，之前項(xiàng)目是用bootstrap模態(tài)框，后來改用layer彈出框，在文章的后面，我會(huì)分享項(xiàng)目的一些代碼(我自己寫的)。

我們提供的服務(wù)有：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、濉溪ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的濉溪網(wǎng)站制作公司

layer至今仍作為layui的代表作，她的受眾廣泛并非偶然，而是這五年多的堅(jiān)持，不斷完善和維護(hù)、不斷建設(shè)和提升社區(qū)服務(wù)，使得猿們紛紛自發(fā)傳播，乃至于成為今天的Layui最強(qiáng)勁的源動(dòng)力。目前，layer已成為國內(nèi)最多人使用的web彈層組件，GitHub自然Stars3000+，官網(wǎng)累計(jì)下載量達(dá)30w+，大概有20萬Web平臺(tái)正在使用layer。 具體請(qǐng)移步layer官網(wǎng)，http://www.layui.com/doc/modules/layer.html

這篇博客會(huì)引用官網(wǎng)的一些內(nèi)容，主要是寫寫layer的一些難點(diǎn)。比如如何用layer打開一個(gè)新的網(wǎng)頁，content直接為一個(gè)網(wǎng)址就可以了，但是在你的項(xiàng)目中，這個(gè)網(wǎng)址又是啥??HTML的直接路徑? 相對(duì)路徑??都不是!! layer如何獲取父界面的元素，比如我點(diǎn)擊新增按鈕，在layer框編輯后提交，是如何關(guān)閉當(dāng)前l(fā)ayer框，額，關(guān)閉layer框很簡單，但是如何關(guān)閉后根據(jù)父界面的form表單向后臺(tái)發(fā)起Ajax請(qǐng)求，，刷新信息。即：layer子界面如何調(diào)用父界面的方法。

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

title - 標(biāo)題

類型：String/Array/Boolean，默認(rèn)：'信息'

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

content - 內(nèi)容

類型：String/DOM/Array，默認(rèn)：''

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

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

   btn - 按鈕

類型：String/Array，默認(rèn)：'確認(rèn)'

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

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

success - 層彈出后的成功回調(diào)方法

類型：Function，默認(rèn)：null

當(dāng)你需要在層創(chuàng)建完畢時(shí)即執(zhí)行一些語句，可以通過該回調(diào)。success會(huì)攜帶兩個(gè)參數(shù)，分別是當(dāng)前層DOM當(dāng)前層索引。如：

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

yes -確定按鈕回調(diào)方法

類型：Function，默認(rèn)：null

該回調(diào)攜帶兩個(gè)參數(shù)，分別為當(dāng)前層索引、當(dāng)前層DOM對(duì)象。如：

layer.open({
 content: '測(cè)試回調(diào)',
 yes: function(index, layero){
  //do something
  layer.close(index); //如果設(shè)定了yes回調(diào)，需進(jìn)行手工關(guān)閉
 }
});

cancel - 右上角關(guān)閉按鈕觸發(fā)的回調(diào)

類型：Function，默認(rèn)：null

該回調(diào)攜帶兩個(gè)參數(shù)，分別為：當(dāng)前層索引參數(shù)（index）、當(dāng)前層的DOM對(duì)象（layero），默認(rèn)會(huì)自動(dòng)觸發(fā)關(guān)閉。如果不想關(guān)閉，return false即可，如；

cancel: function(index, layero){
 if(confirm('確定要關(guān)閉么')){ //只有當(dāng)點(diǎn)擊confirm框的確定時(shí)，該層才會(huì)關(guān)閉
  layer.close(index)
 }
 return false;
}

end - 層銷毀后觸發(fā)的回調(diào)

類型：Function，默認(rèn)：null

無論是確認(rèn)還是取消，只要層被銷毀了，end都會(huì)執(zhí)行，不攜帶任何參數(shù)。

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

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

//頁面一打開就執(zhí)行彈層
layer.ready(function(){
 layer.msg('很高興一開場(chǎng)就見到你');
}); 
layer.close(index) - 關(guān)閉特定層(比較重要)

關(guān)于它似乎沒有太多介紹的必要，唯一讓你疑惑的，可能就是這個(gè)index了吧。事實(shí)上它非常容易得到。

//當(dāng)你想關(guān)閉當(dāng)前頁的某個(gè)層時(shí)
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的，每一種彈層調(diào)用方式，都會(huì)返回一個(gè)index
layer.close(index); //此時(shí)你只需要把獲得的index，輕輕地賦予layer.close即可
//如果你想關(guān)閉最新彈出的層，直接獲取layer.index即可
layer.close(layer.index); //它獲取的始終是最新彈出的某個(gè)層，值是由layer內(nèi)部動(dòng)態(tài)遞增計(jì)算的
//當(dāng)你在iframe頁面關(guān)閉自身時(shí)
var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引
parent.layer.close(index); //再執(zhí)行關(guān)閉 
layer.getChildFrame(selector, index) - 獲取iframe頁的DOM

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

 layer.open({
  type: 2,
  content: 'test/iframe.html',
  success: function(layero, index){
   var body = layer.getChildFrame('body', index);
   var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對(duì)象，執(zhí)行iframe頁的方法：iframeWin.method();
   console.log(body.html()) //得到iframe頁的body內(nèi)容
   body.find('input').val('Hi，我是從父頁來的')
  }
 });

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

此方法一般用于在iframe頁關(guān)閉自身時(shí)用到。

//假設(shè)這是iframe頁
var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引
parent.layer.close(index); //再執(zhí)行關(guān)閉

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

總結(jié)

以上所述是小編給大家介紹的詳解Layer彈出層樣式，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！