首页 前端知识 layer.open属性详解及layer.open弹出框使用post方法

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

2024-03-01 12:03:07 前端知识 前端哥 175 345 我要收藏

一、常用属性详解:

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: 19891014,
    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使用方式。这里有几点需要说明:

  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. 调用子页面方法的方式发生了改变,如上实例。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3005.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!