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

效果图

layui弹框组件多层弹框的使用----随笔_第1张图片

父窗口打开子窗口并传值

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,弹出层,javascript)