溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言：學習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 >自定義內容\<\/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({
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頁的窗口對象，執行iframe頁的方法：iframeWin.method();
console.log(body.html()) //得到iframe頁的body內容
body.find('input').val('Hi，我是從父頁來的')
}
});
layer.getFrameIndex(windowName) - 獲取特定iframe層的索引
此方法一般用于在iframe頁關閉自身時用到。
//假設這是iframe頁 var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執行關閉
封裝好的Layer彈出框與關閉layer彈出框的方法(代碼周一給出, 現在手頭沒有代碼)
總結
以上所述是小編給大家介紹的詳解Layer彈出層樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
