1.導入插件
layui使用需要導入layui的js和css:
<link rel="stylesheet" href="layui/css/layui.css" /> <script src="layui/layui.js"></script>
2.layui彈出層
引入layer，以下的其他代碼均在...的位置實現：
<script> layui.use('layer',function(){ var layer=layui.layer; .....//代碼
}); </script>
2.1最基本的消息框
type : 基本層類型,類型：Number，默認：0。可傳入的值有：0（信息框），1（頁面層），2（iframe層），3（加載層），4（tips層）。如果想點擊一個框而不影響其他的彈出框，在頁面一般讓type為1。
layer.open({ type:1, title:['提示信息'] })
2.2消息提示框
括號里面的第一個是顯示的信息，后面的要顯示的圖標，數字不同代表的圖標不同。想顯示圖標時，默認皮膚可以傳入0-6，如果是加載層，可以傳入0-2。
layer.alert('酷斃了', {icon: 1});//顯示圖標
layer.alert('酷斃了');//不顯示圖標
這個消息框顯示3秒鍾后會消失，默認是3秒。
layer.msg("我是消息彈框，我3秒后消失");
可以自定義標題和內容的消息提示框：
layer.open({ skin:'demo-class',//設置彈框樣式 area:['260px','160px'],//彈框的大小（寬，高），默認：'auto' title:['信息提示框','15px'],//彈框的標題 content: '恭喜你通過了英語四級考試'//顯示的消息內容 })
skin是設置彈框的標題的樣式，若不自定義樣式就采用默認的樣式，也可以自己定義樣式，添加css樣式，都是可以設置成自己需要的顏色：
body .demo-class .layui-layer-title{background:#63B8FF; border: none;}
2.2多個按鈕的消息確認框
確認與取消框：btn最后的按鈕默認是取消按鈕，默認會關閉彈框。准確的介紹見下文！
layer.confirm("確定刪除嗎？",{ btn2: function(index, layero){ //按鈕【按鈕二】的回調 alert("點擊了取消按鈕") } }, function(index, layero){ //按鈕【按鈕一】的回調 alert("點擊了確定按鈕") } );
自定義可禁止關閉按鈕的多按鈕彈框：
layer.open({ content: '你知道牛頓定律嗎？' ,btn: ['熟悉', '了解', '不清楚'], //默認最后一個按鈕是關閉窗口的按鈕 yes: function(index, layero){ alert("熟悉"); return false; //開啟該代碼可禁止點擊該按鈕來關閉窗口 } ,btn2: function(index, layero){ //按鈕【按鈕二】的回調 alert("了解"); return false; } ,btn3: function(index, layero){ //按鈕【按鈕三】的回調 alert("不清楚"); return false; } ,cancel: function(){ //右上角關閉回調 alert("關閉啦"); } });
2.3 按鈕排列
btnAlign，類型：String，默認：'r'。'l'居左對齊，'c'居中對齊。
layer.open({ btnAlign:'l',//設置靠左對齊 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.4關閉按鈕樣式
closeBtn，類型：String/Boolean，默認：1 。layer提供了兩種風格的關閉按鈕，可通過配置1和2來展示，如果不顯示，則closeBtn: 0。三種樣式如下：
layer.open({ closeBtn:'2',//設置為第二種樣式 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.5 遮罩
shade，類型：String/Array/Boolean，遮罩即彈層外區域，默認是0.3透明度的黑色背景（'#000'）。不想顯示遮罩，可以shade: 0。
layer.open({ shade:[0.8,'#00ff00'],//彈框外層是透明度為0.8的#00ff00顏色 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.6是否點擊遮罩關閉
shadeClose,類型：Boolean，默認：false，即點擊遮罩不關閉。如果你的shade是存在的，那么你可以設定shadeClose來控制點擊彈框外區域關閉。
layer.open({ shadeClose: true,//點擊彈框以外的區域關閉彈框 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.7設置自動關閉的時間
time，類型：Number，默認：0，自動關閉所需毫秒。想自動關閉時，使用time: 5000，即代表5秒后自動關閉，單位是毫秒（1秒=1000毫秒）。
layer.open({ time: 5000,//5s后自動關閉 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.8彈層唯一標識
id，類型：String，默認：空字符。設置該值后，不管是什么類型的層，都只允許同時彈出一個（一般看到的是彈出位置最后的一個）。一般用於頁面層和iframe層模式。
layer.open({ id:'open1',//設置id skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.9彈出動畫
anim，類型：Number，默認：0。目前anim可支持的動畫類型有0-6 如果不想顯示動畫，設置 anim: -1 即可。
0：平滑放大 1：從上掉落 2：從最底部往上滑入 3：從左滑入
4：從左翻滾 5：漸顯 6：抖動
layer.open({ anim:1,//設置出現的動畫效果 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.10關閉動畫
isOutAnim，類型：Boolean，默認：true。默認情況下，關閉層時會有一個過度動畫。如果不想開啟，設置 false 即可。
layer.open({ isOutAnim:false,//關閉過度動畫 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.11最大最小化
maxmin，類型：Boolean，默認：false。該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。需要顯示配置maxmin: true即可。
layer.open({ type: 1, maxmin: true,//可調整大小化 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.12固定
fixed，類型：Boolean，默認：true，即鼠標滾動時，彈出層是否固定在可視區域。如果不想，設置fixed: false即可。
2.13是否允許拉伸
resize，類型：Boolean，默認：true。默認情況下，你可以在彈層右下角拖動來拉伸尺寸。如果對指定的彈層屏蔽該功能，設置 false即可。該參數對loading、tips層無效。
layer.open({ resize: false,//不允許窗口拉伸 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試' })
2.14監聽窗口拉伸動作
resizing，
類型：Function，默認：null。當拖拽彈層右下角對窗體進行尺寸調整時，如果設定了該回調，則會執行。回調返回一個參數：當前層的DOM對象。
layer.open({ skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試'， //當窗口拉伸時自動調用 resizing:function(layor){ console.log(layor);//這里會打印很多次，應該是改變一定的尺寸就會調用一次 } })
2.15是否允許瀏覽器出現滾動條
scrollbar，類型：Boolean，默認：true。默認允許瀏覽器滾動，如果設定scrollbar: false，則屏蔽。
layer.open({ scrollbar:false,//禁止瀏覽器出現滾動條 skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試'， } })
2.16設置彈框的位置坐標
offset，類型：String/Array，默認'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' | 設置右下角（處於右下角） |
layer.open({ offset: '100px',//會水平居中顯示,距離頂部100px skin:'demo-class', area:['260px','160px'], title:['信息提示框','15px'], content: '恭喜你通過了英語四級考試'， } })
2.17最大寬度、最大高度
maxWidth，類型：Number，默認：360。只有當area: 'auto'時，maxWidth的設定才有效。
layer.open({ skin:'demo-class', content: '恭喜你通過了英語四級考試'， maxWidth: 1000,//當內容寬度超過1000時才會換行 })
maxHeight，類型：Number，默認：無。只有當高度自適應時，maxHeight的設定才有效。
layer.open({
skin:'demo-class', content: '恭喜你通過了英語四級考試'， maxHeighr: 100,//當內容高度超過100時會出現滾動條，如果設置了固定的高度也會出現這種情況 })
2.18層疊順序*
zIndex，類型：，默認：19891014（賢心生日 0.0），一般用於解決和其它組件的層疊沖突。
2.19彈框拖拽
1）設置觸發拖動的元素
move，類型：String/DOM/Boolean，默認：'.layui-layer-title'。默認是觸發標題區域拖拽來移動彈框。如果想單獨定義，指向元素的選擇器或者DOM即可。如move: '.mine-move'。設定move: false來禁止拖。
layer.open({ skin:'demo-class', content: '恭喜你通過了英語四級考試'， move:false,//禁止拖拽彈框 })
2）是否允許拖拽到窗口外
moveOut，類型：Boolean，默認：false。默認只能在窗口內拖拽，如果你想讓拖到窗外，那么設定moveOut: true即可。
3）拖動完畢后的回調方法
moveEnd，類型：Function，默認：null。默認不會觸發moveEnd，如果你需要，設定moveEnd: function(layero){}即可，其中layero為當前層的DOM對象。
layer.open({ btn:['確定','取消'], type:1, skin:'demo-class', content: '恭喜你通過了英語四級考試', moveEnd:function(index,layero){//拖拽后執行的方法 layer.open({ skin:'demo-class', content: '你拖拽了彈框', }); } })
2.20tips
1）tips方向和顏色
tips，類型：Number/Array，默認：2。是tips層的私有參數。支持上右下左四個方向，通過1-4進行方向設定。如tips: 3則表示在元素的下面出現。有時你還可能會定義一些顏色，可以設定tips: [1, '#c00']。
<body>
<input type="text" id="id" />
</body>
<script>
layui.use(['layer'],function(){
var layer=layui.layer;
layer.tips('從下面顯示', '#id', {tips: [1,'#f0f']});
});
</script>
2）是否允許多個tips
tipsMore，類型：Boolean，默認：false。允許多個意味着不會銷毀之前的tips層。通過tipsMore: true開啟。
layer.tips('從下面顯示', '#id', { tips: [1,'#f0f'], tipsMore:true, }
); layer.tips('從右面顯示', '#id',{tipsMore:true,});
2.21方法回調
1）彈框彈出成功的回調
success，類型：Function，默認：null。當你需要在層創建完畢時即執行一些語句，可以通過該回調。success會攜帶兩個參數，分別是當前層DOM、當前層索引。
layer.open({ content: '測試回調', success: function(layero, index){ console.log(layero, index); } });
2）確定按鈕回調
yes，類型：Function，默認：null。該回調攜帶兩個參數，分別為當前層索引、當前層DOM對象。
layer.open({ content: '測試回調', yes: function(layero, index){ alert("你點擊了確定按鈕") } });
3）右上角關閉按鈕觸發的回調
cancel，類型：Function，默認：null。該回調攜帶兩個參數，分別為：當前層索引參數（index）、當前層的DOM對象（layero），默認會自動觸發關閉。如果不想關閉，return false即可。
layer.open({ content: '測試回調', cancel: function(index, layero){ if(confirm('確定要關閉么')){ //只有當點擊confirm框的確定時，該層才會關閉 layer.close(index)；//關閉彈框的方式 } return false; } });
4）彈框銷毀后觸發的回調
layer.open({ content: '測試回調', btn:['確定','取消'], yes:function(index,layero){ return false;//確定按鈕禁止關閉彈框 }, end:function(){//彈框銷毀（關閉）后執行 alert("彈框被銷毀啦") } });
5）最大化、最小化、還原后觸發的回調
full/min/restore，類型：Function，默認：null。攜帶一個參數，即當前層DOM。
layer.open({ content: '測試回調', btn:['確定','取消'], type:1, maxmin:true, full:function(layero){ alert("點擊最大化時執行") }, min:function(layero){ alert("點擊最小化時執行") }, restore:function(layero){ alert("點擊還原時執行") } });
2.22深入理解layer的方法
1）初始化全局配置 layer.config(options)
它不僅可以配置一些諸如路徑、加載的模塊，甚至還可以決定整個彈層的默認參數。
layer.config({ anim: 1, //默認動畫風格 skin: 'layui-layer-molv' //默認皮膚 … });
除此之外，extend還允許你加載拓展的css皮膚，如下：
layer.config({ //如果是獨立版的layer，則將myskin存放在./skin目錄下 //如果是layui中使用layer，則將myskin存放在./css/modules/layer目錄下 extend: 'myskin/style.css' });
2）初始化就緒 layer.ready(callback)
由於layer內置了輕量級加載器，所以你根本不需要單獨引入css等文件。但是加載總是需要過程的。當你在頁面一打開就要執行彈框時，你最好是將彈框放入ready方法中，如：
//頁面一打開就執行彈層 layer.ready(function(){ layer.alert('很高興一開場就見到你'); });
3)原始核心方法 layer.open(options)
基本上是露臉率最高的方法，不管是使用哪種方式創建層，都是走layer.open()，創建任何類型的彈層都會返回一個當前層索引。
var index=layer.open({ content: '核心方法', }); //可以通過layer.close(index)來關閉這個彈框
4）普通信息框 layer.alert(content, options, yes)
類似系統alert，但卻比alert更靈便。它的參數是自動向左補齊的。通過第二個參數，可以設定各種你所需要的基礎參數，但如果你不需要的話，直接寫回調即可。
layer.alert("只顯示提示的內容");
layer.alert("有圖標的顯示內容",{icon:3})
layer.alert("我有回調，需點擊確定時執行",{icon:1},function(){ console.log("點擊了確定，執行了回調") })
5)確認框 layer.confirm(content, options, yes, cancel)
類似系統confirm，但卻遠勝confirm，另外它不是和系統的confirm一樣阻塞你需要把交互的語句放在回調體中。同樣的，它的參數也是自動補齊的。
//最完整的寫法，不過一般取消是不用的，可以省略
layer.confirm("確定刪除嗎？",{ icon:3, }, function(index){ alert("點擊了確認"); }, function(index){ alert("點擊了取消") } );
也可以這樣寫，把取消按鈕放在optionsh中，也可以在options中btn，換成自己的文字：
layer.confirm("確定刪除嗎？",{ icon:3,
//btn:['是','否'], btn2:function(index){ alert("點擊了取消") } }, function(index){ alert("點擊了確認"); }, );
最常用也是最簡單的方式如下：
layer.confirm("確定刪除嗎？", function(index){ alert("點擊了確認");//do something }, );
6）提示框 layer.msg(content, options, end)
它占據很少的面積，默認會3秒后自動消失，堅持零用戶操作，參數也是自動補齊的。
layer.msg("只顯示簡單的內容");
layer.msg("我有圖標啦",{icon:3})
layer.msg("我還有回調方法",{ icon:3, time:5000,//5秒后自動關閉,默認是3秒 }, function(){ //添加關閉后執行的操作 alert("關閉啦") })
7）加載層 layer.load(icon, options)
type:3的深度定制。load並不需要傳太多的參數，如果不喜歡默認的加載風格，還有選擇空間。icon支持傳入0-2。如果是0，無需傳，是默認的。load默認是不會自動關閉的，一般會在ajax回調體中關閉它。關閉使用layer.close(index);
var index = layer.load();//默認是0
var index = layer.load(1); //換成1的風格
var index = layer.load(2, {time: 10*1000}); //換2的方格，並且設定最長等待10秒，然后會自動關閉
8）tips層 layer.tips(content, follow, options)
type:4的深度定制。它擁有和msg一樣的低調和自覺，而且會智能定位，即靈活地判斷它應該出現在哪邊，默認是在元素右邊彈出。
定義一個輸入框，方便提示：
<input type="text" id="id" />
輸入提示：
layer.tips('簡單版：這里輸入用戶信息', '#id');
在元素的事件回調體中執行，如果這樣使用，需要引入jquery：
$('#id').on('click', function(){ var that = this; layer.tips('只想提示地精准些', that); });
完整的方式：
layer.tips('從下面顯示', '#id', {tips: 1;time:5000});
9）關閉彈框
a.關閉單個 layer.close(index)
關閉特定的彈框：根據需要，指定索引來關閉
var index = layer.open(); layer.close(index);
關閉最新彈出的層：
layer.close(layer.index); //它獲取的始終是最新彈出的某個層，值是由layer內部動態遞增計算的
在iframe頁面關閉自身*：
var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執行關閉
b.關閉所有的彈框 layerAll(type)
layer.closeAll(); //瘋狂模式，關閉所有層 layer.closeAll('dialog'); //關閉信息框 layer.closeAll('page'); //關閉所有頁面層 layer.closeAll('iframe'); //關閉所有的iframe層 layer.closeAll('loading'); //關閉加載層 layer.closeAll('tips'); //關閉所有的tips層
10)重新定義層的樣式 layer.style(index, cssStyle)
該方法對loading層和tips層無效。參數index為層的索引，cssStyle允許你傳入任意的css屬性。
var index = layer.open(); //重新給指定層設定width、top等 layer.style(index, { width: '400px', top: '10px' });
11）改變層的標題 layer.title(title, index)
var index = layer.open(); layer.title("輸入信息",index)
12） 獲取iframe頁的DOM layer.getChildFrame(selector, index)*
當你試圖在當前頁獲取iframe頁的DOM元素時，你可以用此方法。
js代碼：
layer.open({ type: 2, content: 'iframe.html',//這里需要自定義頁面 success: function(layero, index){ var body = layer.getChildFrame('body', index); //得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method(); var iframeWin = window[layero.find('iframe')[0]['name']]; console.log(bodt.html()) //得到iframe頁的body內容 body.find('#id').val('Hi，我是從父頁來的') } });
iframe.html頁面：
<body> 輸入信息：<input type="text" class="layui-input" id="id" name='name' /> <br> 輸入信息：<input type="text" class="layui-input" id="id2" name='name2' /> </body>
13）獲取特定iframe層的索引 layer.getFrameIndex(windowName) *
此方法一般用於在iframe頁關閉自身時用到。
//假設這是iframe頁 var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執行關閉
14）指定iframe層自適應 layer.iframeAuto(index) *
調用該方法時，iframe層的高度會重新進行適應
15）重置特定iframe url。layer.iframeSrc(index, url)*
16）置頂當前窗口 layer.setTop(layero)
當你的頁面有很多很多layer窗口，你需要像Window窗體那樣，點擊某個窗口，該窗體就置頂在上面，那么setTop可以來輕松實現。
17） 手工執行最大小化 layer.full()、layer.min()、layer.restore() *
layer.open({ btn:['最大化','最小化','還原'], context:'點擊按鈕呀', yes:function(index,layero){ layer.full(); return false; },btn2:function(index,layero){ layer.min(); return false; },btn3:function(index,layero){ layer.restore(); return false; } });
18）輸入層 layer.prompt(options, yes)
prompt的參數也是向前補齊的。options不僅可支持傳入基礎參數，還可以傳入prompt專用的屬性。當然，也可以不傳。yes攜帶value:表單值 index:索引 elem:表單元素。
prompt層新定制的成員如下：
{
formType: 1, //輸入框類型，支持0（文本）默認1（密碼）2（多行文本）
value: '', //初始時的值，默認空字符
maxlength: 140, //可輸入文本的最大長度，默認500
}
最簡單的輸入層：
layer.prompt(function(value,index,elem){
alert(value);
layer.close(index);
})
加入屬性的輸入層：
layer.prompt({ formType: 2, value: '', title: '請輸入內容', area: ['800px', '350px'] //自定義文本域寬高 }, function(value, index, elem){ alert(value); //得到value layer.close(index); });
19） tab層 layer.tab(options)
tab層只單獨定制了一個成員，即tab: []
layer.tab({ area: ['600px', '300px'], tab: [{ title: '基本信息', content: '張三' }, { title: '身體狀況', content: '身體非常的健康' }, { title: '經濟狀況', content: '貧困潦倒' }] });
20）相冊層 layer.photos(options) *
相冊層，也可以稱之為圖片查看器。它的出場動畫從layer內置的動畫類型中隨機展現。photos支持傳入json和直接讀取頁面圖片兩種方式。