需要加載模塊：layer ,詳細(xì)參考：http://layer.layui.com/
jquery+layer: http://layer.layui.com/hello.html
模塊化使用：
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});
彈出框類型：type
0（信息框锈候，默認(rèn)）1（頁面層）2（iframe層）3（加載層）4（tips層）
彈出框標(biāo)題：title
title支持三種類型的值，若你傳入的是普通的字符串泵琳，如title :'我是標(biāo)題'，那么只會改變標(biāo)題文本谷市；若你還需要自定義標(biāo)題區(qū)域樣式击孩，那么你可以title: ['文本', 'font-size:18px;']，數(shù)組第二項(xiàng)可以寫任意css樣式巩梢；如果你不想顯示標(biāo)題欄，你可以title: false
彈出框內(nèi)容：content
/!*
如果是頁面層
/
layer.open({
type: 1,
content: '傳入任意的文本或html' //這里content是一個普通的String
});
layer.open({
type: 1,
content: .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ù)組第二項(xiàng)即吸附元素選擇器或者DOM
});
彈出框樣式：內(nèi)置的有：layui-layer-lanlayui-layer-molv
/單個使用
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ū)域。
彈出框大胁笫：area
在默認(rèn)狀態(tài)下，layer是寬高都自適應(yīng)的秸架，但當(dāng)你只想定義寬度時(shí)未斑，你可以area: '500px'，高度仍然是自適應(yīng)的蜡秽。當(dāng)你寬高都要定義時(shí)，你可以area: ['500px', '300px']
彈出框位置:offset
圖標(biāo)：icon
彈出框按鈕：btn
信息框模式時(shí)试浙，btn默認(rèn)是一個確認(rèn)按鈕寞蚌，其它層類型則默認(rèn)不顯示，加載層和tips層則無效壹哺。當(dāng)您只想自定義一個按鈕時(shí)，你可以btn: '我知道了'管宵，當(dāng)你要定義兩個按鈕時(shí)攀甚，你可以btn: ['yes', 'no']。當(dāng)然秋度，你也可以定義更多按鈕，比如：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 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
}
,btn3: function(index, layero){
//按鈕【按鈕三】的回調(diào)
//return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
}
,cancel: function(){
//右上角關(guān)閉回調(diào)
//return false 開啟該代碼可禁止點(diǎn)擊該按鈕關(guān)閉
}
});
按鈕排列
關(guān)閉按鈕：closeBtn
遮罩
自動關(guān)閉time
彈出框動畫anim
maxmin
success:彈出框成功的回調(diào)
layer.open({
content: '測試回調(diào)',
success: function(layero, index){
console.log(layero, index);
}
});
yes:確認(rèn)按鈕回調(diào)
layer.open({
content: '測試回調(diào)',
yes: function(index, layero){
//do something
layer.close(index); //如果設(shè)定了yes回調(diào)胡岔，需進(jìn)行手工關(guān)閉
}
});
關(guān)閉按鈕回調(diào)。如果不想關(guān)閉苫亦，return false即可
cancel: function(index, layero){
if(confirm('確定要關(guān)閉么')){ //只有當(dāng)點(diǎn)擊confirm框的確定時(shí)怨咪，該層才會關(guān)閉
layer.close(index)
}
return false;
}
layer.config 彈出框全局
layer.alert 普通信息框
layer.confirm 詢問框
layer.msg提示框
layer.load 加載層
tips
