引用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
layer.msg('hello.');.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, '提示'); } });转载于:https://www.cnblogs.com/Lulus/p/7873840.html
相关资源：LayerUI后台管理模板