layer.open属性详解及layer.open弹出框使用post方法

一、常用属性详解：

layer.open({// 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）type:1,title:"标题",// 当type: 2时就是urlcontent:"内容/url",// 如果不想要界面滚动条可以这样写//content: ["内容/url",'no']// 宽高：如果是100%就是满屏area:['733px','450px'],// 坐标：auto（默认坐标，即垂直水平居中），具体当文档：https://www.layui.com/doc/modules/layer.html#offsetoffset:'auto',// 按钮：按钮1的回调是yes（也可以是btn1），而从按钮2开始，则回调为btn2: function(){}，以此类推btn:['按钮1','按钮2'],// 关闭按钮：layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则0closeBtn:1,// 遮罩：默认：0.3透明度的黑色背景（'#000'）shade:0.3,// 是否点击遮罩关闭：默认：falseshadeClose:false,// 自动关闭所需毫秒：默认：0不会自动关闭time:0,// 最大最小化：默认：falsemaxmin:false,// 固定：默认：truefixed:true,// 是否允许拉伸：默认：trueresize:true,// 层叠顺序：默认：19891014，一般用于解决和其它组件的层叠冲突zIndex:19891014,// 层弹出后的成功回调方法：layero前层DOM，index当前层索引success:function(layero, index){},// 第一个按钮事件，也可以叫btn1yes:function(index, layero){},btn2:function(index, layero){
        layer.close(index);},// 右上角关闭按钮触发的回调：默认会自动触发关闭。如果不想关闭，return false即可cancel:function(index, layero){if(layer.confirm('确定要关闭么')){//只有当点击confirm框的确定时，该层才会关闭
            layer.close(index);}returnfalse;},// 层销毁后触发的回调：无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。end:function(){},// 最大化后触发的回调：携带一个参数，即当前层DOMfull:function(layero){},// 最小化后触发的回调：携带一个参数，即当前层DOMmin:function(layero){},// 还原后触发的回调：携带一个参数，即当前层DOMrestore:function(layero){},});

例子：

layer.open({type:1,title:"标题",content:"内容/url",area:['733px','450px'],offset:'auto',btn:['按钮1','按钮2'],closeBtn:1,shade:0.3,shadeClose:false,time:0,maxmin:false,fixed:true,resize:truezIndex:19891014,success:function(layero, index){},yes:function(index, layero){},btn2:function(index, layero){
        layer.close(index);},cancel:function(index, layero){
            layer.close(index);}returnfalse;},end:function(){},full:function(layero){},min:function(layero){},restore:function(layero){},});

二：layer.open GET方式说明
如下段代码所示，是最常见的layer.open使用方式。这里有几点需要说明：

1. type 基本层类型，layer提供了5种层类型。可传入的值有：0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）。
2. layer.open其底层采用的就是get请求方式，因此使用layer.open的弹出层页面传参只能是拼接在url后面。
3. 对于type=2的弹出框，可以使用图示中的方法调用子页面弹出框的doSubmit() 方法，并获取该方法的返回值。

layer.open({type:2,area:["900px","520px"],title:"子页面-弹出框",content:"${basePath}/aaa/bbb/get?id=1",btn:['确定','关闭'],yes:function(index, layero){// 调用子页面（弹出框）的doSubmit方法并获取其返回值var iframeWin = layero.find('iframe')[0];var data = iframeWin.contentWindow.doSubmit();},cancel:function(layer_window){// 关闭弹出框页面
        layer.close(layer_window);}});

三、layer.open POST方式介绍

由于layer.open其底层就是get请求方式，因此，如果需要使用post请求的话，必须要引入其他方式，这里采用ajax。

思路：用ajax通过post方式传参请求到页面的html，然后通过layer.open方法展示出来。

$.ajax({type:"POST",url:"${basePath}/aaa/bbb/post",data:{"id":1,"type":2,"code":3},success:function(res){var html = res.data;
        layer.open({type:1,area:["900px","520px"],title:"子页面-弹出层",content: html,btn:['确定','关闭'],yes:function(index, layero){// 调用子页面（弹出框）的doSubmit方法并获取其返回值var context = layero.find('page').context;var data = context.defaultView.doSubmit();},cancel:function(layer_window){// 关闭弹出框页面
                layer.close(layer_window);}});}});

如上段代码所示，是layer.open post请求页面的方放。这里有几点需要说明：

1. type必须为1，因为这里layer.open的content是直接给出HMTL代码的。
2. 调用子页面方法的方式发生了改变，如上实例。