JS中iframe难题:弹出一个网页对话框，页面背景全变灰,但效果弹出的页面只能遮盖住这个iframe，不能遮盖住整个页面

JS弹出一个网页对话框，页面背景全变灰。现将这个页面以iframe内嵌在另一页面中，此时弹出效果为页面只能遮盖住这个iframe，不能遮盖住整个页面。请问有什么解决方案？试了将他放在父窗口中但总是不行,请高手指点.以下为代码,c.html所在的FRAME可以变为灰,但是并不是我想的想个页面变灰,请高手修改:
----------------------a.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>框架</title>
</head>
<frameset rows="100,*"  frameborder="no" border="0" framespacing="5">
  <frame src="b.html" name="supTopFrame">
  <frame src="" name="middleFrame" scrolling="yes" frameborder="no" border="0">   
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>--------------------------------b.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>群组设置</title>
</head>
<script language="javascript" type="text/JavaScript">
function search(){
frm.action="c.html";
frm.target="middleFrame";
frm.submit();
}
</script>
<body>
<form name="frm">
<table width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#BDBEC0" bordercolordark="#ffffff">
<tr>
<td colspan="6" align="left" >
<b>群组设置:</b></font>
</td>
</tr>
<tr>
<td width="12%" align="center">
小灵通号码
</td>
<td width="18%" class="td2">
<input type="text" name="phsphone"  value="">
</td>
<td class="td2">
<button  onclick="search()">查询</button>
</td>
</tr>
</table>
</form>
</body>
</html>----------------------------------c.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>群组设置</title>
<style>
.black_overlay{  
  display: none;  
  position: absolute; 
   top: 0%;  
   left: 0%;  
   width: 100%;  
   height: 100%;  
   background-color: black;  
   z-index:1001;  
   -moz-opacity: 0.8;  
   //opacity:0.8; 
   //filter: alpha(opacity=60);  
 }  
 .white_content {  
 display: none;  
 position: absolute;  
 top: 25%;  
 left: 25%;  
 width: 50%;  
 height: 50%;  
 padding: 16px;  
 border: 16px solid orange;  
 background-color: white;  
 z-index:1002;  
 overflow: auto;  
 }  
 </style>
</head>
<body>
<form name="frm">
 <p><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>
<div id="light" class="white_content">
数据处理中,请稍等...
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="fade" class="black_overlay">
</div>
</form>
</body>
</html>

解决方案 »

  1.   

    在a.html中使用iframe,不用frameset，然后把<div id="fade" class="black_overlay"> 
    放在父窗口中
      

  2.   

    遮盖div直接放在父窗口的body后面
      

  3.   

    遮盖div直接放在父窗里面，在iframe中使用window.parent.document.getElementById("遮盖div").style.display="block";让遮盖div在父窗体中显示
      

  4.   

    不用FRAMESET,用IFRAME是可以实现.
    但是用IFRAME不能实现复杂的框架.如:左,上,下,这样的构架分布,好像用IFRAME就实现不了?