使DIV不被select等控件遮挡的解决办法

Posted on 2009-01-16 11:06 lzhdim 阅读(883) 评论(0) 编辑收藏举报

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

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>

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

</select>

</form>

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

</div>

</iframe>

<br/>

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

<br/>

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

</body>

</html>

刷新页面返回顶部

Lzhdim's Fashion

公告

使DIV不被select等控件遮挡的解决办法