layui.layer 彈出層使用
阿新 • • 發佈：2019-01-01
layer 在 layui 體系中的位置比較特殊，甚至讓很多人都誤以為 layui = layer ui，所以再次強調 layer 只是作為 layui 的一個彈層模組
1,獲取laery,你需要去官網下載laery.js 地址--http://layer.layui.com/
function show(){
var a=layer.open({
type: 2,
area: ['80%','450px'],
title: '我是標題',
shadeClose: true,
content: ['layer_model.html','no']
});
}
基礎引數
1, type 型別
title:"我是標題",//若你還需要自定義標題區域樣式，那麼你可以title: ['文字', 'font-size:18px;']，陣列第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false
3, content 內容
/!*
如果是頁面層
*/
layer.open({
type: 1,
content: '傳入任意的文字或html' //這裡content是一個普通的String
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: ['
如果是用layer.open執行tips層
*/
layer.open({
type: 4,
content: ['內容', '#id'] //陣列第二項即吸附元素選擇器或者DOM
4, area 寬高
在預設狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: '500px'，高度仍然是自適應的。當你寬高都要定義時，你可以area: ['500px', '300px']
5, btn 按鈕
資訊框模式時，btn預設是一個確認按鈕，其它層型別則預設不顯示，載入層和tips層則無效。當您只想自定義一個按鈕時，你可以btn: '我知道了'，當你要定義兩個按鈕時，你可以btn: ['yes', 'no']。當然，你也可以定義更多按鈕，比如：btn: ['按鈕1', '按鈕2', '按鈕3', …]，按鈕1的回撥是yes，而從按鈕2開始，則回撥為btn2: function(){}，以此類推。如：
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 開啟該程式碼可禁止點選該按鈕關閉
}
});
6, shade 遮罩
即彈層外區域。預設是0.3透明度的黑色背景（'#000'）。如果你想定義別的顏色，可以shade: [0.8, '#393D49']；如果你不想顯示遮罩，可以shade: 0
如果你的遮罩是存在的那麼你還可以設定 shadeClose 是否點選遮罩關閉 預設：false 如果你的shade是存在的，那麼你可以設定shadeClose來控制點選彈層外區域關閉
1,獲取laery,你需要去官網下載laery.js 地址--http://layer.layui.com/
2,引入laery.js 在此之前你必須要先引入jQuery1.8以上的任意版本
function show(){
var a=layer.open({
type: 2,
area: ['80%','450px'],
title: '我是標題',
shadeClose: true,
content: ['layer_model.html','no']
});
}
基礎引數
1, type 型別
type: 1,
//0（資訊框，預設）1（頁面層）2（iframe層）3（載入層）4（tips層）
2, title 標題title:"我是標題",//若你還需要自定義標題區域樣式，那麼你可以title: ['文字', 'font-size:18px;']，陣列第二項可以寫任意css樣式；如果你不想顯示標題欄，你可以title: false
3, content 內容
/!*
如果是頁面層
*/
layer.open({
type: 1,
content: '傳入任意的文字或html' //這裡content是一個普通的String
});
示例:
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: ['
});
示例:
如果是用layer.open執行tips層
*/
layer.open({
type: 4,
content: ['內容', '#id'] //陣列第二項即吸附元素選擇器或者DOM
});
示例:
4, area 寬高
在預設狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: '500px'，高度仍然是自適應的。當你寬高都要定義時，你可以area: ['500px', '300px']
5, btn 按鈕
資訊框模式時，btn預設是一個確認按鈕，其它層型別則預設不顯示，載入層和tips層則無效。當您只想自定義一個按鈕時，你可以btn: '我知道了'，當你要定義兩個按鈕時，你可以btn: ['yes', 'no']。當然，你也可以定義更多按鈕，比如：btn: ['按鈕1', '按鈕2', '按鈕3', …]，按鈕1的回撥是yes，而從按鈕2開始，則回撥為btn2: function(){}，以此類推。如：
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 開啟該程式碼可禁止點選該按鈕關閉
}
});
6, shade 遮罩
即彈層外區域。預設是0.3透明度的黑色背景（'#000'）。如果你想定義別的顏色，可以shade: [0.8, '#393D49']；如果你不想顯示遮罩，可以shade: 0
如果你的遮罩是存在的那麼你還可以設定 shadeClose 是否點選遮罩關閉 預設：false 如果你的shade是存在的，那麼你可以設定shadeClose來控制點選彈層外區域關閉