layer.open 使用中弹出页面需要比父级大。

最新推荐文章于 2023-11-03 13:40:04 发布

原创最新推荐文章于 2023-11-03 13:40:04 发布 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css3

all 专栏收录该内容

69 篇文章

订阅专栏

本文探讨了layer.js库中layer.open方法的使用技巧，特别是在调整弹出窗口大小及与父窗口交互方面。通过对比不同调用方式，如直接使用layer.open、top.layer.open及其优化版本，详细分析了如何在保持元素访问性的同时，实现弹窗尺寸的灵活控制。

问题在layer.open 使用中弹出页面需要比父级大。

1 、使用 layer.open

	 layer.open({
		type: 2,
		shadeClose : true,
       shade : 0.4,
       zIndex:window.top.layer.zIndex,
		content: encodeURI("../serviceRequestType/toForm?tplTypeId=2"),
		title: "模板列表",
		area: ['90%', '60%']
	});

在子页面中传值 parent.$(id)可以使用但页面大小需要小于父级页面

2、使用 top.layer.open

 top.layer.open({
		type: 2,
		shadeClose : true,
       shade : 0.4,
       zIndex:window.top.layer.zIndex,
		content: encodeURI("../serviceRequestType/toForm?tplTypeId=2"),
		title: "模板列表",
		area: ['90%', '60%']
	});

页面大小可以改变但 parent.$(id) 传值失败

3、使用top.layer.open 优化

 top.layer.open({
		type: 2,
		shadeClose : true,
       shade : 0.4,
       zIndex:window.top.layer.zIndex,
		content: encodeURI("../serviceRequestType/toForm?tplTypeId=2"),
		title: "模板列表",
		area: ['90%', '60%'],
		btn: ['确定', '关闭'],
		yes:function(index, layero){
			var body = top.layer.getChildFrame('body', index);
			var iframeWin = layero.find('iframe')[0]; 
			var receiptFormWork = body.find('#receiptFormWork').val();
			var receiptFormWorkName = body.find('#receiptFormWorkName').val();
			reInfo(receiptFormWork,receiptFormWorkName);
			top.layer.close(index);//关闭弹窗
		}
	});

使用top.layer.open 改变页面大小

btn: [‘确定’, ‘关闭’],
yes:function(index, layero) 获取子页面元素

方法体操作子页面元素

top.layer.close(index);//关闭弹窗