1

IE6下弹出层被选择框(select)遮挡的解决办法

Posted by 晴云孤魂 on 2011 年 05 月 31 日 in web development |

  <!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导入的页面背景透明。
 

Copyright © 2011-2021 晴云孤魂's Blog All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.5, from BuyNowShop.com.

普人特福的博客cnzz&51la for wordpress,cnzz for wordpress,51la for wordpress