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

简介: 在IE中,select属于window类型控件,它会“挡住”所有非window类型控件 可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的, 他们被渲染在客户区的绘画表面上, 而select是使用的标准windows控件,只是作为客户区的子控件放置而已, 它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件, 比如iframe和其他的select,如果你使用过类似Delphi这样的环境就会自然理解。

     在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>
目录
相关文章
|
10月前
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1583 0
|
7天前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
164 0
|
6月前
通过select下拉框里的value控制div显示与隐藏
通过select下拉框里的value控制div显示与隐藏
39 0
|
6月前
|
前端开发 算法
怎么写一个可以拖拽缩放的div?
怎么写一个可以拖拽缩放的div?
58 0
|
9月前
element-plus:el-switch文字显示不全、拥挤
element-plus:el-switch文字显示不全、拥挤
138 0
el-dialog嵌套问题,第二个弹窗会被遮住的解决办法
el-dialog嵌套问题,第二个弹窗会被遮住的解决办法
721 0
element-ui中Select 选择器去除点击时的淡蓝色边框
element-ui中Select 选择器去除点击时的淡蓝色边框
|
小程序 前端开发 JavaScript
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件
01day 动态绑定变量 导航组件 view text是否可以复制 button 上下滚动组件
|
前端开发 JavaScript
根据Select框的取值,动态显示另外的Div(十)
在员工入职时,有这么一个动作。如果选择的是编外的入职,那么则显示后面相关联的员工。 如果不是编外的入职,则隐藏后面的相关联的员工。
211 0
根据Select框的取值,动态显示另外的Div(十)