欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui弹框组件多层弹框的使用----随笔

程序员文章站 2022-05-06 09:42:14
...

效果图

layui弹框组件多层弹框的使用----随笔

父窗口打开子窗口并传值

type-可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
	layer.open({
		type: 2,
		offset: '50px',
		skin: 'layui-layer-molv',
		title: "账单列表",
		// closeBtn: 0, //不显示关闭按钮
		anim: 2,
		area: ['1400px', '600px'],
		// shade: 0,
		shadeClose: true,
		// scrollbar: false, // 是否允许浏览器出现滚动条
		content: 'bill.html?billTermUUID='+billTermUUID+"&termState="+termState,
		success: function (layero, index) {
			//找到它的子窗口的body
			var body = layer.getChildFrame('body', index);  //巧妙的地方在这里哦
			//在这里可以为子窗口元素赋值
			// body.contents().find("#input1").val(input1);
			// console.log("子窗开启成功")
		},
		end: function () {
			vm.reload(); //页面重新加载
			// console.log("子窗关闭成功")
		}
	});

子窗口获取父窗口参数

	var billTermUUID =getQueryString("billTermUUID");
	var termState = getQueryString("termState");
	
	function getQueryString(name) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	    var r = window.location.search.substr(1).match(reg);
	    if (r !== null)
	        return unescape(r[2]);
	    return null;
	}

具体参数可以参考: https://www.layui.com/doc/modules/layer.html

相关标签: layui 弹出层