實例：

layer.open({
?? ??? ?type: 1,
?? ??? ?title: '標(biāo)題',
?? ??? ?skin: 'layui-layer-rim', //加上邊框
?? ??? ?area: ['1070px', '550px'], //設(shè)置寬高
?? ??? ?content:$("#lookinfo"),
?? ??? ?btn: ['按鈕1','按鈕2'],
?? ??? ?btn1:function(index, layero){
?? ??? ??? ?// 按鈕1的邏輯
?? ??? ?},
?? ??? ?btn2:function(index, layero){
?? ??? ??? ?// 按鈕2的邏輯
?? ??? ?},
?? ??? ?cancel: function(){
?? ??? ??? ?// 右上角關(guān)閉事件的邏輯
?? ??? ?}
?? ?});

------------------------------------------------常用情景------------------------------------------------------

1.點擊“按鈕”僅關(guān)閉彈窗，不刷新 ，可使用layer.close(index);

layer.open({
?? ??? ??? ?type: 1,
?? ??? ??? ?title: '查看',
?? ??? ??? ?closeBtn: 1,?
?? ??? ??? ?anim: 2,
?? ??? ??? ?shadeClose: true,?
?? ??? ??? ?area: ?['540px', '750px'],
?? ??? ??? ?content: $("#lookinfo"),
?? ??? ??? ?btn: ["確定","取消"],
?? ??? ??? ?yes: function(index, layero){
?? ??? ??? ? ? ?layer.close(index);
?? ??? ??? ?},
?? ??? ??? ?cancel: function(index, layero){
?? ??? ??? ??? ?layer.close(index);
?? ??? ??? ?},
?? ??? ?});

------------------------------------------------詳細(xì)說明------------------------------------------------------

type -- 基本層類型

類型：Number，默認(rèn)：0

0（信息框，默認(rèn)）1（頁面層）2（iframe層）3（加載層）4（tips層）

title --?標(biāo)題

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

title支持三種類型的值：

1、若你傳入的是普通的字符串，如title :'我是標(biāo)題'，那么只會改變標(biāo)題文本；

2、若你還需要自定義標(biāo)題區(qū)域樣式，那么你可以title: ['文本', 'font-size:18px;']，數(shù)組第二項可以寫任意css樣式；

3、如果你不想顯示標(biāo)題欄，你可以title: false

skin -- 樣式類名

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

skin允許傳入layer內(nèi)置的樣式class名

skin允許傳入自定義的class名，可以借助skin輕松完成不同的風(fēng)格定制

目前l(fā)ayer內(nèi)置的skin有：layui-layer-lanlayui-layer-molv，去查看layer皮膚制作說明

推薦自己來定義：（如下）

//單個使用 layer.open({skin: 'demo-class' }); //全局使用。即所有彈出層都默認(rèn)采用，但是單個配置skin的優(yōu)先級更高 layer.config({skin: 'demo-class' }) //CSS body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;} body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7} body .demo-class .layui-layer-btn a{background:#333;} body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;} … 加上body是為了保證優(yōu)先級。你可以借助Chrome調(diào)試工具，定義更多樣式控制層更多的區(qū)域。

content?- 內(nèi)容

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

content可傳入的值是靈活多變的

可以是普通的html內(nèi)容

可以指定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出現(xiàn)滾動條，你還可以content: ['http://sentsin.com', 'no'] }); /!*如果是用layer.open執(zhí)行tips層*/ layer.open({type: 4,content: ['內(nèi)容', '#id'] //數(shù)組第二項即吸附元素選擇器或者DOM });

area?- 寬高

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

在默認(rèn)狀態(tài)下，layer是寬高都自適應(yīng)的

若要定義寬度：area: '500px'，高度仍然是自適應(yīng)的

若要定義寬高：area: ['500px', '300px']

btn?- 按鈕

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

信息框模式時，btn默認(rèn)是一個確認(rèn)按鈕，其它層類型則默認(rèn)不顯示，加載層和tips層則無效。

若需自定義一個按鈕時，btn: "我知道了'"

若需自定義兩個按鈕時，btn: ['yes', 'no']

若需自定義更多按鈕，btn: ['按鈕1', '按鈕2', '按鈕3', …]，按鈕1的回調(diào)是yes，而從按鈕2開始，則回調(diào)為btn2: function(){}，以此類推。(如下)

//eg1 layer.confirm('納尼？', {btn: ['按鈕一', '按鈕二', '按鈕三'] //可以無限個按鈕,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 開啟該代碼可禁止點擊該按鈕關(guān)閉},btn3: function(index, layero){//按鈕【按鈕三】的回調(diào)//return false 開啟該代碼可禁止點擊該按鈕關(guān)閉},cancel: function(){ //右上角關(guān)閉回調(diào)//return false 開啟該代碼可禁止點擊該按鈕關(guān)閉} });

offset?- 坐標(biāo)

類型：String/Array，默認(rèn)：垂直水平居中

offset默認(rèn)情況下不用設(shè)置。但如果你不想垂直水平居中，你還可以進(jìn)行以下賦值：

值備注

offset: 'auto'	默認(rèn)坐標(biāo)，即垂直水平居中
offset: '100px'	只定義top坐標(biāo)，水平保持居中
offset: ['100px', '50px']	同時定義top、left坐標(biāo)
offset: 't'	快捷設(shè)置頂部坐標(biāo)
offset: 'r'	快捷設(shè)置右邊緣坐標(biāo)
offset: 'b'	快捷設(shè)置底部坐標(biāo)
offset: 'l'	快捷設(shè)置左邊緣坐標(biāo)
offset: 'lt'	快捷設(shè)置左上角
offset: 'lb'	快捷設(shè)置左下角
offset: 'rt'	快捷設(shè)置右上角
offset: 'rb'	快捷設(shè)置右下角

icon?- 圖標(biāo)

信息框和加載層的私有參數(shù)

類型：Number，默認(rèn)：-1（信息框）/0（加載層）

信息框默認(rèn)不顯示圖標(biāo)

若需顯示圖標(biāo)時，默認(rèn)皮膚可以傳入0-6

若是加載層，可以傳入0-2

//eg1 layer.alert('酷斃了', {icon: 1}); //eg2 layer.msg('不開心。。', {icon: 5}); //eg3 layer.load(1); //風(fēng)格1的加載

btnAlign?- 按鈕排列

類型：String，默認(rèn)：r

該參數(shù)可支持的賦值：

值備注

btnAlign: 'l'	按鈕左對齊
btnAlign: 'c'	按鈕居中對齊
btnAlign: 'r'	按鈕右對齊。默認(rèn)值，不用設(shè)置

closeBtn?- 關(guān)閉按鈕

類型：String/Boolean，默認(rèn)：1

layer提供了兩種風(fēng)格的關(guān)閉按鈕，可通過配置1和2來展示

若需不顯示，則closeBtn: 0

shade?- 遮罩

類型：String/Array/Boolean，默認(rèn)：0.3

即彈層外區(qū)域

默認(rèn)是0.3透明度的黑色背景（'#000'）

若需定義別的顏色，shade: [0.8, '#393D49']；

若需不顯示遮罩，可以shade: 0

shadeClose?- 是否點擊遮罩關(guān)閉

類型：Boolean，默認(rèn)：false

如果你的shade是存在的，那么你可以設(shè)定shadeClose來控制點擊彈層外區(qū)域關(guān)閉。

time?- 自動關(guān)閉所需毫秒

類型：Number，默認(rèn)：0

默認(rèn)不會自動關(guān)閉。

若需自動關(guān)閉時，可以time: 5000，即代表5秒后自動關(guān)閉，注意單位是毫秒（1秒=1000毫秒）

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

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

若需在層創(chuàng)建完畢時即執(zhí)行一些語句，可以通過該回調(diào)。

success會攜帶兩個參數(shù)，分別為：當(dāng)前層索引參數(shù)（index）、當(dāng)前層的DOM對象（layero）

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

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

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

該回調(diào)攜帶兩個參數(shù)，分別為：當(dāng)前層索引參數(shù)（index）、當(dāng)前層的DOM對象（layero）

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

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

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

該回調(diào)攜帶兩個參數(shù)，分別為：當(dāng)前層索引參數(shù)（index）、當(dāng)前層的DOM對象（layero）

默認(rèn)會自動觸發(fā)關(guān)閉

如果不想關(guān)閉，return false即可

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

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

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

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

full/min/restore?-分別代表最大化、最小化、還原 后觸發(fā)的回調(diào)

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

攜帶兩個參數(shù)，分別為：當(dāng)前層索引參數(shù)（index）、當(dāng)前層的DOM對象（layero）

min: function(layero, index){ //index 參數(shù)為 layui 2.6.6 或獨立版 layer 3.5.0 開始新增//當(dāng)層最小化時觸發(fā)//自定義操作，并阻止默認(rèn)最小化//layer.min(index); //單獨執(zhí)行最小化//return false; //阻止默認(rèn)最小化 }

id?- 用于控制彈層唯一標(biāo)識

類型：String，默認(rèn)：空字符

設(shè)置該值后，不管是什么類型的層，都只允許同時彈出一個。一般用于頁面層和iframe層模式

查看更多：layer彈層組件開發(fā)文檔 - Layui

總結(jié)

以上是生活随笔為你收集整理的layer.open（常用）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。