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

 

.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, '提示');

            }

        });