iframe子页面弹出框遮罩层问题的解决方法

问题描述：iframe内的遮罩层未遮挡父级元素， 若把蒙版放在父页面，蒙版会遮挡住iframe内所有元素。

代码结构：

解决方法一：

     可以使用layer框架，框架里面可以定义，具体可以查看文档。（我没使用这个框架，因为我觉得引入一个框架只为了使用其中的模态框不划算。）

 

解决方法二：（刚开始使用的这个方法，还是存在问题）

思路：打开子页面的同时，分别动态生成头部和左侧菜单栏遮罩层，关闭弹框时则移除父元素添加的蒙版。

遮罩层只能挡住可视区域，滚动条滚动之后 有空白。

代码实现：

// 这里要给iframe一个自适应的高度
<div class="right fr" id="content">
	<div class="itemstyle">
	    <iframe src="backtop.html" frameborder="0" scrolling="no" onload="setIframeHeight(this)"></iframe>
	</div>
</div>



/*右侧css样式*/
.right .itemstyle,iframe{min-width: 700px;min-height: 798px;}



/* begin首页遮罩层代码  */

//打开遮罩层
function showIndexMask()
{
    var arrayPageSize = getPageSize();
    var arrayPageScroll = getPageScroll();
     //获取目标元素
     var popupDiv = document.getElementById("header");
     //根据右侧iframe的高度 确定左侧遮罩层的高度
     var content = document.getElementById('content');
     var windowWidth =document.body.clientWidth;
     
     
     //顶部遮罩层
     var bodyBackTop = document.createElement("backDivTop");
     bodyBackTop.setAttribute("id","backDivTop")
//   bodyBackTop.style.width = (arrayPageSize[0]-195+'px');
	if(IsPC()){  //判断客户端是为了适配ipad
		bodyBackTop.style.width = '100%';
	}else{
		bodyBackTop.style.width = '76.5%';		
	}
//   bodyBackTop.style.height = (arrayPageSize[1]*0.132 + 'px');
	 bodyBackTop.style.height = '140px';
     bodyBackTop.style.zIndex = 98;
     bodyBackTop.style.position = "absolute";
     bodyBackTop.style.top = 0;
     bodyBackTop.style.left = '230px';

     bodyBackTop.style.filter = "alpha(opacity=50)";
     bodyBackTop.style.opacity = 0.5;
     bodyBackTop.style.background = "#000";
     
     //左边遮罩层
     var bodyBackLeft = document.createElement("backDivLeft");
     bodyBackLeft.setAttribute("id","backDivLeft");
     bodyBackLeft.style.width = '230px';  //230为左侧菜单栏的宽度
     bodyBackLeft.style.height =  content.height*1 + 140 + 'px';  //140为header的高度
//   bodyBackLeft.style.height = (arrayPageSize[1]-17+ 'px');
     bodyBackLeft.style.zIndex = 98;
     bodyBackLeft.style.position = "absolute";
     bodyBackLeft.style.top = 0;
     bodyBackLeft.style.left = 0;

     bodyBackLeft.style.filter = "alpha(opacity=50)";
     bodyBackLeft.style.opacity = 0.5;
     bodyBackLeft.style.background = "#000";

    //插入到目标元素之后
    insertAfter(bodyBackTop,popupDiv);
    insertAfter(bodyBackLeft,popupDiv);
    
}  
//关闭遮罩层
function closeIndexMask()
{
	setTimeout(function () {
		var index= document.getElementById("index");
		var backDivTop = document.getElementById("backDivTop");
    	var backDivLeft = document.getElementById("backDivLeft");
    	index.removeChild(backDivTop);
    	index.removeChild(backDivLeft);
	}, 0);
   
    //return false;
}
//元素插入另一个元素之后
function insertAfter(newElement, targetElement) 
{ 
    var parent = targetElement.parentNode; 
    //alert(targetElement.id);
    if(parent.lastChild == targetElement) 
    { 
        parent.appendChild(newElement); 
    } 
    else 
    { 
        parent.insertBefore(newElement, targetElement.nextSibling); 
    } 
}


//获取滚动条的高度
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
   yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
   yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
   yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array('',yScroll) 
return arrayPageScroll;
}
//获取页面实际大小
function getPageSize(){ 
    
    var xScroll, yScroll; 
    
    if (window.innerHeight && window.scrollMaxY) {    
        xScroll = document.body.scrollWidth; 
        yScroll = window.innerHeight + window.scrollMaxY; 
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 
        xScroll = document.body.scrollWidth; 
        yScroll = document.body.scrollHeight; 
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 
        xScroll = document.body.offsetWidth; 
        yScroll = document.body.offsetHeight; 
    } 
    
    var windowWidth, windowHeight; 
    if (self.innerHeight) {    // all except Explorer 
        windowWidth = self.innerWidth; 
        windowHeight = self.innerHeight; 
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 
        windowWidth = document.documentElement.clientWidth; 
        windowHeight = document.documentElement.clientHeight; 
    } else if (document.body) { // other Explorers 
        windowWidth = document.body.clientWidth; 
        windowHeight = document.body.clientHeight; 
    }    
    
    // for small pages with total height less then height of the viewport 
    if(yScroll < windowHeight){ 
        pageHeight = windowHeight; 
    } else { 
        pageHeight = yScroll; 
    }

    // for small pages with total width less then width of the viewport 
    if(xScroll < windowWidth){    
        pageWidth = windowWidth; 
    } else { 
        pageWidth = xScroll; 
    }

    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
    return arrayPageSize; 
}

//判断客户端是否为PC还是手持设备
function IsPC() { 
    var userAgentInfo = navigator.userAgent; 
    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); 
    var flag = true; 
    for (var v = 0; v < Agents.length; v++) { 
        if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } 
    } 
    return flag; 
} 


//iframe自适应高度
function setIframeHeight(iframe) {
	if (iframe) {
		var content = document.getElementById('content');
		var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
		if (iframeWin.document.body) {
			iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
			content.height = iframe.height;
		}
	}
};

 

解决方法三：（最后使用了这种方法，可行）

思路：

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

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

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

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

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

代码实现：

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

<!--子页面中的遮罩（iframe）-->
<span style="font-size:24px;">
<div id="maskIframe" >
 
</div>
</span>


//定义遮罩出现的函数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";
	
});