index.html内的弹窗,利用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; }

用户的某个操作，触发$(".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文件：