layerui

引用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