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

  <p> 本课程系统讲解了layer窗里的所有方法。逐一进行了分析和讲解。 </p> <p> <br /> </p> <ul> <li> <p> 内置方法 </p> <ul> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.config">config全局设置</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.ready">ready就绪</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.open">open核心方法</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.alert">alert</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.confirm">confirm询问</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.msg">msg提示</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.load">load加载</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.tips">tips吸附</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.close">close关闭层</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.closeAll">closeAll关闭全部</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.style">style</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.title">title重置标题</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.getChildFrame">getChildFrame</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.getFrameIndex">getFrameIndex</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.iframeAuto">iframeAuto</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.iframeSrc">iframeSrc</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.setTop">setTop多层置顶</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.full">full/min/restore</a> </p> </li> </ul> </li> <li> <p> 其他内置层 </p> <ul> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.prompt">prompt输入层</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.tab">tab选项卡层</a> </p> </li> <li> <p> <a href="https://www.layui.com/doc/modules/layer.html#layer.photos">photos图片层</a> </p> </li> </ul> </li> </ul> <p> <br /> </p>
相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页