<style type="text/css">
<!--
html, body {
height:100%;
margin:0px;
font-size:12px;
}
.mydiv {
background-color: #f9fff6;
border: 1px solid #009900;
text-align: center;
line-height: 25px;
font-size: 13px;
font-weight: bold;
z-index:99;
width: 300px;
height: 50px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 half of its width */
margin-top:-60px!important;/*FF IE7 half of its height*/
margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg {
background-color: #C2BEBF;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=40);/*IE*/
opacity:0.4;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
-->
</style>
<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}
function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
</script>
<div id="popDiv" class="mydiv" style="display:none;">The system is dealing with your request, please waiting...<br/>
<!--<a href="javascript:closeDiv()">close</a>-->
</div>
<div id="bg" class="bg" style="display:none;"></div>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出半透明层 (支持IE FF)</title>
</head>
<body>
<form id="frm1" name="frm1" action="new_page_2.htm" method="post">
<input type="button" value="Show DIV" onClick="showDiv()" />
<select>
<option >test</option>
</select>
<br>
<br>
<br>
<br>
<select name="selOccPool" multiple="multiple" size="6" style="width:20%" id="selOccPool">
<option value = "**All**" selected="true">**All**</option>
<option value="6A">6A</option>
<option value="6B">6B</option>
<option value="6C">6C</option>
<option value="6D">6D</option>
<option value="6E">6E</option>
<option value="6F">6F</option>
<option value="6G">6G</option>
</select>
</form>
</body>
</html>
分享到：
相关推荐
Div模态对话框,全屏遮挡，对话框里的图片居中定位,支持IE,Firefox，傲游，360安全浏览器
在网页设计与开发领域，DIV遮罩层是一种常用的UI技术，用于暂时性地遮挡页面的其他部分，从而聚焦用户的注意力于特定区域或操作上。这种方法尤其适用于弹出窗口、加载动画、登录框等场景，能够提升用户体验和界面的...
在网页设计中，有时会遇到一个常见的问题，即`div`元素被`select`下拉框遮挡。这个问题主要源于浏览器的默认样式和渲染机制。`select`元素通常具有较高的Z轴顺序（z-index），因此它会覆盖其他层叠元素，如`div`。在...
在网页设计和开发中，"DIV遮挡问题"是一个常见的前端技术挑战，主要涉及到HTML中的<div>元素和CSS层叠样式表（Cascading Style Sheets）的布局与定位。这个问题通常发生在多个<div>元素重叠时，一个<div>可能会遮挡...
7. **防止遮挡**：如果弹出层的内容被其他元素遮挡，可以检查是否正确设置了`overflow`属性，或者确保父元素的`z-index`低于弹出层。 8. **点击穿透**：为了避免弹出层下方的元素仍然可点击，可以设置`pointer-...
1. **评论容器**：用于展示评论列表，通常是一个`<div>`元素，通过CSS样式设置定位和透明度，创建遮挡层效果。 2. **评论表单**：包含输入框让用户输入评论内容，可能包括用户名、评论内容等字段，以及一个提交按钮...
### 最顶层div被flash或者下拉列表遮挡的问题解决 在网页设计中，有时会出现顶层的div元素被其他元素如Flash或下拉列表遮挡的情况。这种遮挡问题通常是由于CSS定位属性设置不当造成的，尤其是`z-index`值的设置不...
3. 避免遮挡主要内容：确保悬浮层不会覆盖重要的页面内容。 4. 自适应布局：悬浮层应具有响应式设计，适应不同设备和屏幕尺寸。 5. 用户行为跟踪：记录用户对悬浮层的互动，以便优化展示策略。 总结，Div悬浮层的...
在IE6中，无论`z-index`设置得多高，`div`层通常都无法遮挡`select`组件，这是因为`select`在IE6中被赋予了一个特殊的“顶级”堆叠上下文。 为了解决这个问题，开发者们通常会采用以下几种策略： 1. **使用iframe*...
在前端开发过程中，DIV元素被IFRAME遮挡是一个常见的问题，尤其是当页面布局复杂或存在多层嵌套的元素时。以下将详细阐述几种DIV被IFRAME遮挡的情况，并提供相应的解决方法。 首先，要了解的是IFRAME是一种HTML元素...
在描述中提到的“前辈的成果，显示所需要的页面，第一个页面隐藏”，可能指的是使用`div`作为初始页面，然后通过某种用户交互（如点击按钮）来显示`iframe`内容，同时`div`作为背景或者遮罩层，使得`iframe`内容成为...
在网页设计中，我们经常需要实现弹出窗口的效果，而这种效果通常通过创建浮动的DIV层来实现。在本实例中，我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先，我们需要了解HTML结构。`index.htm`和`...
2. **CSS 遮盖层**：遮盖层通常是一个全屏的半透明背景，用于遮挡页面上的其他元素，使用户注意力集中于弹出层。通过设置CSS的`position`属性为`fixed`或`absolute`，使其相对于窗口或父元素定位，配合`z-index`来...
这些方法都是为了在`<select>`元素之上创建一个覆盖层，从而避免下拉菜单穿透到其他元素。 1. bgiframe插件：这是jQuery的一个插件，它会在元素周围插入一个透明的IFrame，以模拟背景图片的行为。这个IFrame可以...
DIV浮动层被FLASH遮挡，这种情况想必有很多人都有遇到过吧，下面针对，主流浏览器做了下解决方案，感兴趣的朋友可以参考下
1. 使用jQuery bgiframe插件：该插件创建一个透明的iframe层，将被遮挡的div覆盖在select之上，从而避免遮挡问题。 2. 避免使用绝对或相对定位：改用其他布局方式，如使用浮动（float）或Flexbox（对于现代浏览器）...
例如，`select` 的边框、背景色或阴影可能被 `div` 层遮挡，或者 `div` 的透明度设置可能影响到 `select` 的可见性。 3. **JavaScript 或 jQuery 事件处理**：如果使用了 JavaScript 或 jQuery 来处理 `div` 层的...
一个不错的遮罩效果的弹出div层 适用于Asp。net 美观大方 js编写
DIV遮罩层是一种在网页上添加的半透明覆盖层，用于实现对页面其他内容的遮挡，常用于弹出层、加载提示或页面临时锁定等场景。实现DIV遮罩层的关键知识点主要包括以下几点： 1. HTML结构：创建一个用于遮罩的DIV元素...