iframe中弹出框后添加覆盖整个页面的遮罩层并且不覆盖子页面中的弹出框

最新推荐文章于 2022-04-13 10:33:43 发布

judas_jia

最新推荐文章于 2022-04-13 10:33:43 发布

阅读量3w

点赞数 5

分类专栏： html 文章标签： html css JavaScript

本文链接：https://blog.csdn.net/judas_jia/article/details/52183704

版权

html 专栏收录该内容

4 篇文章

订阅专栏

这个是我最近几天遇到的一个问题，确实令我抓狂了一阵。。。。

接下来讲一讲解决方法：

1.首先得要弹出覆盖整个页面的遮罩层，由于iframe是body的一个子元素部分，所以可以将弹出层代码写到父页面中，然后在子页面拿到父页面的对象，打开父页面的遮罩

2.打开遮罩层后我遇到了问题（iframe中的弹出框也被遮罩层给覆盖了），显然这不是我想要的结果，在佳哥我都要吐血的时候突然发现原来只是我太蠢。。。。

用z-index即可实现，接下来很显然就要必须给ifame所在设置position:absolute了,问题又来了。。。。

3.设置iframe的z-index在遮罩层之上后，理所应当我悲剧的发现整个iframe都上去了，但是我只想让弹出框上去。

4.最终我只能在iframe子页面上也设置了一个遮罩层，相当于，我点击按钮弹出子页面的弹出框，同时打开两个遮罩层，一个为父元素的遮罩，一个为iframe页面上的遮罩。

补上具体实现方法：

（1）父页面的遮罩

<span style="font-size:24px;"><!--遮罩层-->
<div id="mask" >

</div>
<!-- 遮罩层结束 --></span>

(2)子页面中的遮罩（iframe）

<span style="font-size:24px;"><!--遮罩层-->
<div id="maskIframe" >

</div>
<!-- 遮罩层结束 --></span>

当然，遮罩的初始样式是display:none;

(3)定义遮罩出现的函数globalShade() 与遮罩消失的函数deleteGlobalShade()

function globalShade()
{
	//获取页面的高度和宽度
	
	if(window.parent.document.getElementById('mask'))
		{	
		
		window.parent.document.getElementById('mask').style.display="block";
	
		}
	if(document.getElementById("maskIframe"))
		{
			document.getElementById("maskIframe").style.display="block";
			
		
		}
	
		
};
function deleteGlobalShade()
{
	if(window.parent.document.getElementById('mask'))
	{	
	window.parent.document.getElementById('mask').style.display="none";

	}
if(document.getElementById("maskIframe"))
	{

		document.getElementById("maskIframe").style.display="none";
	
	}

};

$(function(){
	
	var sWidth=document.documentElement.clientWidth;
	var sHeight=document.documentElement.clientHeight;
	//获取页面的可视区域高度和宽度
	var wHeight=document.documentElement.clientHeight;
	var oMask=document.getElementById("mask");
	var oMaskIframe=document.getElementById("maskIframe");
	
	oMask.style.height=sHeight+"px";
	oMask.style.width=sWidth+"px";
	
	});