天天看點

使DIV不被select等控件遮擋的解決辦法

     在IE中,select屬于window類型控件,它會“擋住”所有非window類型控件

可以這麼了解,div這樣的元件是在浏覽器客戶區使用代碼“渲染”的,

他們被渲染在客戶區的繪畫表面上,

而select是使用的标準windows控件,隻是作為客戶區的子控件放置而已,

它會覆寫所有客戶區繪畫表面上“畫”出來的一切,但不一定會覆寫其他類型的window控件,

比如iframe和其他的select,如果你使用過類似Delphi這樣的環境就會自然了解。

有4種辦法;

1. 修改select,不用标準select,而是自己用其他html元素模拟

2.

修改你的div,使用iframe。

3. 在div被顯示的時候或者到達select所在位置時隐藏select

4.

在div中或div的同一坐标上,用相同尺寸的iframe先遮擋一下,然後在iframe上顯示div的内容。

第4種方法的例子:

<html>

<head>

<script>

function DivSetVisible(state){

     var DivRef = document.getElementById('PopupDiv');

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

    if(state){

                  DivRef.style.display = "block";

                  IfrRef.style.width = DivRef.offsetWidth;

                  IfrRef.style.height = DivRef.offsetHeight;

                  IfrRef.style.top = DivRef.style.top;

                  IfrRef.style.left = DivRef.style.left;

                  IfrRef.style.zIndex = DivRef.style.zIndex - 1;

                  IfrRef.style.display = "block";

   }else{

                 DivRef.style.display = "none";

                 IfrRef.style.display = "none";

   }

}

</script>

</head>

<body>

<form>

<select>

<option>A Select Box is Born ....</option>

</select>

</form>

<div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">

.... and a DIV can cover it up<br/>through the help of an IFRAME.

</div>

<iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">

</iframe>

<br/>

<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>

<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>

</body>

</html>

繼續閱讀