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文件:
时间: 2024-10-08 03:17:23