您的位置：首页 > 其它

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

2009-01-16 11:06 267 查看

在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/>
<br/>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航