IE6下弹出层被选择框(select)遮挡的解决办法
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>弹出层被选择框(select)遮挡-懒人建站-51xuediannao.com</title>
<style>
body{margin:0px;padding:0px;}
#message_box{ position:absolute; width:800px; height:536px; z-index:10000; visibility:hidden; border:#000 3px solid;background-color:#FFF;margin:40px 0px 0px 50px;}
#mask{ position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight); background:#000; filter:ALPHA(opacity=80); z-index:1; visibility:hidden}
.close-what{float:right;cursor:hand;}
.message{background-color:#F4F4F4;width:754px;height:200px;margin:20px 20px 20px 20px;color:#FF6600;}</style>
</head><body>
<div id=”message_box”><iframe src=”” style=”width:800px;height:536px;top:0px;left:0px;position:absolute;visibility:inherit;z-index:-1;” frameborder=0></iframe>
<div onclick=”document.getElementById(‘message_box’).style.visibility=’hidden’;document.getElementById(‘mask’).style.visibility=’hidden'”><img src=”/images/close-what.gif”></div>
<div>
<p>懒人建站-解放出你的部分写代码时间来思考更高层次的设计</p>
<p>懒人建站为您提供-空间素材,JS广告代码,网页特效,导航菜单,焦点幻灯片代码,网页欣赏与网页模板和CSS技巧。</p>
</div>
</div>
<div id=”mask”></div>
<table width=”960″ height=”2603″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”960″ height=”303″ align=”center”><p><span onclick=”document.getElementById(‘mask’).style.visibility=’visible’;document.getElementById(‘message_box’).style.visibility=’visible'” style=”cursor:hand”><a href=”#”>来点击我试试 — 懒人建站</a></span>
</p>
<p>
<select name=”select”>
<option value=”http://51xuediannao.com/“>懒人建站</option>
</select>
</p>
<p>效果演示:<a href=”http://51xuediannao.com/JS/texiao/20100327/select-transparent.html” target=”_blank”>懒人建站</a></p>
<p>原理:只要在层里面如 iframe </p>
<pre><iframe src=”” style=”width:800px;height:536px;top:0px;left:0px;position:absolute;visibility:inherit;z-index:-1;” frameborder=0></iframe></pre>
</td>
</tr>
<tr>
<td height=”2300″ align=”center”></td>
</tr>
</table><!– //message_box –>
<!–下面只是说明与程序代码无关–>
<div style=”width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;”>
<span>本代码由<a href=”http://www.51xuediannao.com” style=”color:#F00;”>懒人建站网 收集整理 我要学电脑.COM →51xuediannao.com</a> </span><br>
<a href=”http://www.51xuediannao.com“>懒人建站 http://www.51xuediannao.com</a><br/>
<span>我们为您提供-
<a href=”HTML+CSS” _mce_href=”HTML+CSS”>http://www.51xuediannao.com/html+css/”>HTML+CSS” _mce_href=”http://www.51xuediannao.com/html+css/”>HTML+CSS”>http://www.51xuediannao.com/html+css/”>HTML+CSS”>http://www.51xuediannao.com/html+css/”>HTML+CSS”>http://www.51xuediannao.com/html+css/”>HTML+CSS模板</a>,
<a href=”JS” _mce_href=”JS”>http://www.51xuediannao.com/js/”>JS” _mce_href=”http://www.51xuediannao.com/js/”>JS”>http://www.51xuediannao.com/js/”>JS”>http://www.51xuediannao.com/js/”>JS”>http://www.51xuediannao.com/js/”>JS代码</a>,
<a href=”http://www.51xuediannao.com/JS/texiao/“>网页特效</a>,
<a href=”http://www.51xuediannao.com/JS/nav/“>导航菜单</a>,
<a href=”http://www.51xuediannao.com/JS/Slide/“>焦点幻灯片<a>,
<a href=”http://www.51xuediannao.com/JS/show/“>网页欣赏</a>和
<a href=”CSS” _mce_href=”CSS”>http://www.51xuediannao.com/JS/jiqiao/css/”>CSS” _mce_href=”http://www.51xuediannao.com/JS/jiqiao/css/”>CSS”>http://www.51xuediannao.com/JS/jiqiao/css/”>CSS”>http://www.51xuediannao.com/JS/jiqiao/css/”>CSS”>http://www.51xuediannao.com/JS/jiqiao/css/”>CSS技巧</a>;</span>
<span>懒人建站只收录实用和能提高用户体验的代码</span>
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。</span>
</div>
</body>
</html>代码说明:
在IE6中一个带遮罩的弹出层会被选择框(select)遮挡住,特别的讨厌,解决方案:
在遮罩层中加入如下代码:
<iframe src=”” style=”width:800px;height:536px;top:0px;left:0px;position:absolute;visibility:inherit;z-index:-1;” frameborder=0></iframe>
这里还有一个问题就是,必须适当的控制iframe的位置与大小,因为iframe的背景默认为白色,即使你的src=”” 为空他依然会有白色背景,如果你控制好了他的大小和位置,就可以和弹出层重合在一起。当然解决这个问题你也可以这样去做,方法如下:
首先建立一个空的touming.htm,
主页面中引用:<iframe allowtransparency=true src=”touming.htm” frameborder=”0″ ></iframe>然后在 touming.htm的body中写入:<body style=”background-color:transparent”>
注意上面的 allowtransparency=true 和style=”background-color:transparent” 这两个配合就可以使iframe导入的页面背景透明。