實例：

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

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

1.點擊“按鈕”僅關閉彈窗，不刷新 ，可使用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);
?? ??? ??? ?},
?? ??? ?});

------------------------------------------------詳細說明------------------------------------------------------

type -- 基本層類型

類型：Number，默認：0

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

title --?標題

類型：String/Array/Boolean，默認：'信息'

title支持三種類型的值：

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

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

3、如果你不想顯示標題欄，你可以title: false

skin -- 樣式類名

類型：String，默認：''

skin允許傳入layer內置的樣式class名

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

目前layer內置的skin有：layui-layer-lanlayui-layer-molv，去查看layer皮膚制作說明

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

//單個使用 layer.open({skin: 'demo-class' }); //全局使用。即所有彈出層都默認采用，但是單個配置skin的優先級更高 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是為了保證優先級。你可以借助Chrome調試工具，定義更多樣式控制層更多的區域。

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 });

area?- 寬高

類型：String/Array，默認：'auto'

在默認狀態下，layer是寬高都自適應的

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

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

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 開啟該代碼可禁止點擊該按鈕關閉} });

offset?- 坐標

類型：String/Array，默認：垂直水平居中

offset默認情況下不用設置。但如果你不想垂直水平居中，你還可以進行以下賦值：

值備注

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

icon?- 圖標

信息框和加載層的私有參數

類型：Number，默認：-1（信息框）/0（加載層）

信息框默認不顯示圖標

若需顯示圖標時，默認皮膚可以傳入0-6

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

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

btnAlign?- 按鈕排列

類型：String，默認：r

該參數可支持的賦值：

值備注

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

closeBtn?- 關閉按鈕

類型：String/Boolean，默認：1

layer提供了兩種風格的關閉按鈕，可通過配置1和2來展示

若需不顯示，則closeBtn: 0

shade?- 遮罩

類型：String/Array/Boolean，默認：0.3

即彈層外區域

默認是0.3透明度的黑色背景（'#000'）

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

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

shadeClose?- 是否點擊遮罩關閉

類型：Boolean，默認：false

如果你的shade是存在的，那么你可以設定shadeClose來控制點擊彈層外區域關閉。

time?- 自動關閉所需毫秒

類型：Number，默認：0

默認不會自動關閉。

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

success?- 層彈出后的成功回調方法

類型：Function，默認：null

若需在層創建完畢時即執行一些語句，可以通過該回調。

success會攜帶兩個參數，分別為：當前層索引參數（index）、當前層的DOM對象（layero）

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

yes?- 確定按鈕回調方法

類型：Function，默認：null

該回調攜帶兩個參數，分別為：當前層索引參數（index）、當前層的DOM對象（layero）

layer.open({content: '測試回調',yes: function(index, layero){//do somethinglayer.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都會執行，不攜帶任何參數。

full/min/restore?-分別代表最大化、最小化、還原 后觸發的回調

類型：Function，默認：null

攜帶兩個參數，分別為：當前層索引參數（index）、當前層的DOM對象（layero）

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

id?- 用于控制彈層唯一標識

類型：String，默認：空字符

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。