在[url]http://highping.iteye.com/admin/blogs/362230[/url]中用Iframe实现了点击弹出窗口网页背景变暗且不可点的效果，虽然解决了弹出窗口被select遮挡住的问题，但网页背景的select依然没有被遮挡住，IE7解决了此类BUG；这里仍然采用Iframe作网页透明背景，让背景的select控件不可选。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>点击弹出窗口网页背景变暗且不可点的效果(iframe实现)</title><script LANGUAGE="JavaScript" src="dragiframe.js"></script><style type="text/css">a { color: #000; font-size: 12px; text-decoration: none}a:hover { color: #900; text-decoration: underline}</style><script language="javascript"> function centerLayer( obj ) { var ocw = obj.clientWidth; var och = obj.clientHeight; var bsl = document.body.scrollLeft || document.documentElement.scrollLeft; var bst = document.body.scrollTop || document.documentElement.scrollTop; var bcw = document.body.clientWidth || document.documentElement.clientWidth; var bch = document.body.clientHeight || document.documentElement.clientHeight; var osl = bsl + Math.floor( ( bcw - ocw ) / 2 ); osl = Math.max( bsl , osl ); var ost = bst + Math.floor( ( bch - och ) / 2 ); ost = Math.max( bst , ost ); obj.style.left = osl + 'px'; obj.style.top = ost + 'px'; } function openLayer(){ iframe1.location="iframe1.html"; document.getElementById('iframe1').style.display=''; document.getElementById('iframe1').style.visibility='visible'; document.getElementById('mask').style.display=''; document.getElementById('mask').style.visibility='visible'; var obj = document.getElementById('iframe1'); centerLayer(obj); }</script> </head> <body> <iframe name="iframe1" id="iframe1" style="display: none; width: 350px; height: 200px; position: absolute; top: 50; left: 125; border: #DAEBF5 solid; border-width: 1 1 3 1; z-index: 101;" scrolling="no" src="#" frameborder=0></iframe> <iframe name="mask" id="mask" style="display: none; width: expression(body . scrollWidth); height: expression(body . scrollHeight); background: #666; position: absolute; top: 0; left: 0; border: 0px solid #000; background-color: transparent; filter: ALPHA(opacity = 20);" src="mask.html" frameborder=0></iframe> <span onClick="openLayer();" style="cursor: hand"><a href="#">显示提示信息</a> <select> <option>option1</option> <option>option2</option> </select> </span> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iframe1</title><script language="JavaScript" src="dragiframe.js"></script><style type="text/css">a { color: #000; font-size: 12px; text-decoration: none}a:hover { color: #900; text-decoration: underline}#massage_box { position: absolute; left: expression(( body . clientWidth-350)/ 2 ); top: expression(( body . clientHeight-200)/ 2 ); width: 350px; height: 200px; filter: dropshadow(color = #666666, offx = 3, offy = 3, positive = 2); z-index: 2;}.massage { border: orange solid; border-width: 1 1 3 1; height: 173px; overflow-y: auto; background: #fff; color: #036; font-size: 12px; line-height: 150%}.header { background: orange; height: 24px; padding: 3 5 0 5; color: #fff; cursor: move;}</style><script language="javascript"> function closeIframe(){ parent.document.getElementById("mask").style.visibility='hidden' parent.document.getElementById("iframe1").style.display = "none";//关闭子窗口 }</script> </head> <body BGCOLOR="orange" onLoad="addHandle(document.getElementById('toolbar'), window);"> <div id="massage_box"> <div class="header" ID="toolbar"> <table height="24" border="0" cellpadding="0" cellspacing="0" width="100%" style="color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"> <tr> <td>用户使用规则</td> <td align="right"> <span onClick="closeIframe();" style="cursor: hand">【确定】</span> <span onClick="closeIframe();" style="cursor: hand">【关闭】</span> </td> </tr> </table> </div> <div class="massage"> <ul style="margin-right: 25"> <li> 用户必须自行配备上网和使用电信增值业务所需的设备，自行负担个人上网或第三方（包括但不限于电信或移动通信提供商）收取的通讯费、信息费等有关费用。 </li> <li> 您同意本服务仅供个人使用且非商业性质的使用，您不可对本服务任何部分或本服务之使用或获得（包括但不限于QQ号码），进行复制、拷贝、出售、或利用本服务进行调查、广告、或用于其他商业目的。 </li> <li> 保证自己在使用各服务时用户身份的真实性和正确性及完整性，如果资料发生变化， 您应及时更改。 </li> <li> 在安全完成本服务的登记程序并收到一个密码及帐号后，您应维持密码及帐号的机密安全。 </li> </ul> </div> </div> </body></html>
<html> <head> <title></title> </head> <body style="background-color: transparent; overflow-y: hidden; overflow-x: hidden" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" scroll="yes"> <table border="0" width=100% height=100% bgcolor="#d3ddea"> <tr> <td></td> </tr> </table> </body></html>
