目录
  • 一、常用属性详解：
  • 二：layer.open GET方式说明
  • 三、layer.open POST方式介绍
  • 附：iframe层(type:2) ：弹出层直接调用其他地方的页面
  • 总结

一、常用属性详解：

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

二：layer.open GET方式说明

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

  • type 基本层类型，layer提供了5种层类型。可传入的值有：0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）。
  • layer.open其底层采用的就是get请求方式，因此使用layer.open的弹出层页面传参只能是拼接在url后面。
  • 对于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请求页面的方放。这里有几点需要说明：

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

附：iframe层(type:2) ：弹出层直接调用其他地方的页面

 layer.open({ type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）, shade:0.1, //遮罩层透明度 area:['850px','500px'], //弹出层宽高 title:'材料库',//弹出层标题 content: 'xx/xx.jsp' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'] });

总结

到此这篇关于layer.open属性详解及layer.open弹出框使用post方法的文章就介绍到这了,更多相关layer.open属性弹出框使用内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！

您可能感兴趣的文章:

  • 解决layer.open弹出框不能获取input框的值为空的问题
  • 获取layer.open弹出层的返回值方法