利用z-index属性实现网页弹出框

标签：

           java web应用开发过程中，有些用户操作需要以弹出框形式展示，今天对以往项目开发中的弹出框实现原理仔细分析了一下，使用CSS的z-index属性，可以实现简单的弹出框效果。具体原理：

.mask{ z-index:900; position:fixed!important; 
position:absolute; left:0px; top:0px; width:100%; height:100%;  
background:#000; 
filter: alpha(opacity=45); opacity: 0.45; 
-moz-opacity: 0.45; -khtml-opacity: 0.45; } 

<!--当前页面内容显示DIV z-index最小-->
<div class="shell" id="content">		
</div>

<!-- mask负责将背景灰掉，z-index为900 -->
<div class="mask" style="display:none;"></div>
<!-- 弹出框DIV，z-index-900,div_op show时显示在页面最上层-->
<div class="box"  style="display:none;position:absolute;top:50%;
	left:50%;width: 520px;height:auto;z-index: 999; margin: -150px 0px 0px -260px;" id="div_op">		
</div>

         用户的某个操作，触发$(".mask").show(); $("#div_op").show();由于mask的z-index>content，而div_op的z-index>mask，再结合position属性，设置弹出框的位置为网页的居中部位，CSS的position是absolute时，指定的top和left等于定位相关的属性才生效；同时margin调整div_op相对其父元素的位置，在top:50%;left:50%的基础上，向上、向左分别移动一定的距离，使得弹出框最终居中。简单的弹出效果如下：

           简单例子的htm文件：

利用z-index属性实现网页弹出框

标签：

原文地址：http://blog.csdn.net/wojiushiwo945you/article/details/43195603