引用layer.js，官網：http://layer.layui.com/
常用屬性：btn/icon/skin/time/content/yes（點擊確認、提交）
常用窗體
.alert
layer.alert("內容");
layer.alert('墨綠風格，點擊確認看深藍', {
skin: 'layui-layer-molv'//樣式類名
, closeBtn: 0
}, function () {
layer.alert('偶吧深藍style', {
skin: 'layui-layer-lan'
, closeBtn: 0
, shift: 2 //動畫類型
});
});
.confirm
layer.confirm('您是如何看待前端開發？',{
btn: ['重要', '奇葩'] //按鈕
}, function () {
layer.msg('的確很重要', { icon: 1 });
}, function () {
layer.msg('也可以這樣', {
time: 20000, //20s後自動關閉
btn: ['明白了', '知道了']
},function() {
layer.msg('明白就好', { time: 20000 });
},function() {
layer.msg('知道就好', { time: 20000 });
});
});
.msg
.open 自定義窗口
layer.open({
type: 1,
skin: 'layui-layer-demo',//樣式類名
btn: ["關閉"],
/*closeBtn: 0, //不顯示關閉按鈕*/
shift: 2,
shadeClose: true, //開啓遮罩關閉
content: '內容'
});
layer.open({
type: 2,
title: 'layer mobile頁',
shadeClose: true,
shade: 0.8,
area: ['700px','90%'],
content: 'http://layer.layui.com/mobile/'//iframe的url
});
.html
$("#layerOpen").html('<imgsrc="/images/loading.gif"/>正在努力爲您搜索，請稍後...');
.load 加載
$("#layerOpen").load("/Order/ProductList");
.tips
關閉layer
用一個變量存儲彈窗，在需要關閉的地方調用close方法
<div style="display:none;"id="layerOpen"></div>
var layerOpen = null; //彈窗變量
layerOpen=layer.open({
type: 1,
title: "查看XXX的詳情",
area: ["1000px","600px"],
content: $("#layerOpen"),
cancel: function () {
$("#layerOpen").html("");
}
});
layer.close(layerOpen);
打開自定義頁面
$("#layerOpen").html('<imgsrc="/images/loading.gif"/>正在努力爲您搜索，請稍後...');
$("#layerOpen").load("/Controller/Action");
layerOpen = layer.open({
type: 1,
title: "選擇XXX",
area: ["1000px","600px"],
content: $("#layerOpen"),
cancel: function () {
$("#layerOpen").html("");
}
});
加載頁面
保存變量，打開頁面賦值，關閉頁面
//加載layer
var load = null;
$.ajax({
type: "POST",
url: "/Controller/Action",
data: {
"PKID":PKID,
"Path": path
},
beforeSend: function () {
load = layer.load(0, { shade:[0.3, '#000'] });//0代表加載的風格，支持0-2
},
success: function (result) {
if (load != null) {
layer.close(load);
}
layer.alert(result.Msg, '提示');
}
});