网站用户体验整合设计-IE6弹出层盖不住下拉菜单的解决方案

IE6弹出层盖不住下拉菜单的解决方案

Post by 张美工, 2010-8-23, Views:

方案 I :

使用iframe方式解决，如下例子

<!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>

<style type="text/css">

body {margin:0;padding:0;text-align:center;background-color:#eee;}

#bd {margin:20px auto;padding:5px 20px 20px;border:1px solid #bbb;width:760px;background-color:#9CCE2E;}

#popup {position:absolute;left: 443px;top:87px;}

.layer{width:300px;height:100px;padding:10px;border: 1px solid blue;background-color:#fff; }

#popup iframe{display:none;_display:block;position:absolute;top:0;left:0px;z-index:-1;filter:mask();width:320px;height:120px;}

</style>

</head>

<body>

<div id="bd">

     <h1>IE6下div遮盖select的解决方案</h1>

     <div><label for="ddTest">Test</label>

         <select id="ddTest">

             <option>…</option>

             <option>pick me</option>

         </select>

     </div>

</div>

<div id="popup">

<div class="layer">Is the select element poking through? </div>

<iframe></iframe>

</div>

</body>

</html>

注意绿色代码段。

工作原理：iframe能盖住select下拉菜单。

在弹出层增加iframe，并采用绝对定位，z-index:-1让iframe浮于弹出层下方；

filter:mask();让iframe透明~

display:none;_display:block;保证FF，IE7以上版本不受影响

width,height值确保iframe大小跟弹出层大小相同

注意事项：

弹出层最外层区域只设置定位样式（position，left，top,z-index...），避免设置风格显示样式(特别注意边框) 因为iframe在其内，当边线刚好和select框重叠，边线将被select覆盖，影响显示效果

缺陷：需要根据弹出层大小不同，设置iframe大小，局限比较大。

当弹出层为半透明时，被覆盖的下拉菜单消失

方案 II :

改进思路：

在有弹出层页面，增加一个<iframe></iframe>绝对层，处于主页面内容上方，弹出层下方。并且iframe层大小为窗口或网页的大小，覆盖主内容。

当页面弹出绝对层时，同时显示iframe层；绝对层隐藏，同时iframe也隐藏。

页面代码如下：

<form>

   <select><option>这里是主页面内容区的下拉菜单</option></select>
</form>
<div id="PopupDiv">这里是弹出层区域</div>
<iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0"> </iframe> //这里是 iframe层

主要样式表如下：

#PopupDiv{position:absolute;left:***;top:***;z-index:***;...display:none;}

#DivShim{position:absolute;top:0;left:0px;filter:mask();display:none;}

js代码如下：

<script>

   function DivSetVisible(state)
   {
     var DivRef = document.getElementById('PopupDiv');
     var IfrRef = document.getElementById('DivShim');
       if(state)
       {
       DivRef.style.display = "block";
       IfrRef.style.width = document.body.offsetWidth;
       IfrRef.style.height = document.body.offsetHeight;

       IfrRef.style.zIndex = DivRef.style.zIndex - 1;
       IfrRef.style.display = "block";
       }
       else
       {
       DivRef.style.display = "none";
       IfrRef.style.display = "none";
       }
   }
</script>

其中state为逻辑值,当需要显示时,触发DivSetVisible(ture)函数; 当需要隐藏时,触发DivSetVisible(false);

注意：脚本取属性值有问题，只能取标签里定义的样式，无法取到样式表里的值。此问题在后面补充

方案 III :

进一步优化：

不采用整体主页面内容覆盖，而是使iframe层大小，位置等于弹出层大小和位置，并处于弹出层下方。

并使用getStyle函数取样式表里的属性值。

<!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>

<style type="text/css">

body{margin:0;padding:0;text-align:center;background-color:#eee;}

#bd{margin:20px auto;padding:5px 20px 20px;border:1px solid #bbb;width:760px;background-color:#9CCE2E;}

#popup{position:absolute;left:443px;top:80px;z-index:10;width:300px;height:100px;padding:10px;border:1px solid #333;background:#fff;display:none;}

#DivShim{position:absolute;filter:mask();border:none;display:none;}

</style>

</head>

<body>

<div id="bd">

<h1>IE6下div遮盖select的解决方案</h1>

<div><label for="ddTest">Test</label>

     <select id="ddTest">

     <option>…</option>

     <option>pick me</option>

     </select>

</div>

</div>

<div id="popup">Is the select element poking through?<br/><p >关闭弹出层</p></div>

<iframe id="DivShim" src="javascript:;" scrolling="no"> </iframe>

<br/><br/>

<br/><br/>

<br/><br/>

<br/><br/>

<b >打开弹出层</b>

<b >关闭弹出层</b>

<script>

//触发显示隐藏方法

function DivSetVisible(idName,state)

{

var DivRef = document.getElementById(idName);

var IfrRef = document.getElementById('DivShim');

if(state){

     DivRef.style.display = "block";

     IfrRef.style.display = "block";

     IfrRef.style.width = DivRef.offsetWidth + "px";

     IfrRef.style.height = DivRef.offsetHeight + "px";

     IfrRef.style.top = getStyle(DivRef,"top");

     IfrRef.style.left = getStyle(DivRef,"left");

     IfrRef.style.zIndex = getStyle(DivRef,"zIndex")-1;

}

else{

     DivRef.style.display = "none";

     IfrRef.style.display = "none";

}

}

//取样式表里的属性值方法

function getStyle(elem, name){

if (elem.style[name])

     return elem.style[name];

else if (elem.currentStyle)

     return elem.currentStyle[name];

else if (window.getComputedStyle)

     return document.defaultView.getComputedStyle(elem,null).getPropertyValue(name);

else return null;

}

</script>

</body>

</html>