select遮住div的解决方法之——iframe篇

最新推荐文章于 2012-12-11 14:33:00 发布

weixin_30325487

最新推荐文章于 2012-12-11 14:33:00 发布

阅读量102

点赞数

原文链接：http://www.cnblogs.com/kendyjack/archive/2012/09/19/2693961.html

版权

在做一个项目的时候，如大家所遇到的情况一样，div被select遮住了（测试在IE6下才有这样的问题）

因为我做的是遮罩层

#bgbox{background:#000;opacity:0.5;filter:alpha(opacity = 50);position:absolute;top:0;left:0;width:100%;z-index:99;display:none;}

<select>
  <option>3个月</option>
  <option>6个月</option>
  <option>9个月</option>
  <option>1年</option>
  <option>2年</option>
</select>
<div id="bgbox">
<iframe id="ifr" style="position:absolute; z-index: -1; width: 100%; height:100%;background:#000;opacity:0.5;filter:alpha(opacity = 50);top: 0; 
left: 0;scrolling:no;" frameborder="0" src="about:blank"></iframe>
</div>

<script type="text/javascript">
var oBgBox = document.getElementById("bgbox");
var oIfr = document.getElementById("ifr");
function showBox(){
    oBgBox.style.display = "block";
    oBgBox.style.height = oIfr.style.height = document.body.offsetHeight + "px";
}

</script>

这是主要的代码，但是仔细测试了一下，发现在IE6下滚动页面，select还是会浮出来（虽然只是在滚动的时候，停止滚动是正常的）。

转载于:https://www.cnblogs.com/kendyjack/archive/2012/09/19/2693961.html