利用z-index属性实现网页弹出框
2015-01-27 15:44
246 查看
java web应用开发过程中,有些用户操作需要以弹出框形式展示,今天对以往项目开发中的弹出框实现原理仔细分析了一下,使用CSS的z-index属性,可以实现简单的弹出框效果。具体原理:
用户的某个操作,触发$(".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文件:
.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文件:
相关文章推荐
- Asp.net点击按钮弹出文件夹选择框的实现(网页利用ActiveX)
- 利用Filter实现对网页某些特殊属性的设置,例:设置网页的缓存情况
- 多级<select>选择的实现(利用selectedIndex属性)
- 利用AJAX技术实现网页无刷新进度条显示
- 利用AJAX技术实现网页无刷新进度条显示
- 在网页中插入虚线 利用HR实现
- 利用窗体的自定义属性实现窗体传值
- 利用网页特效实现无刷新
- 利用AJAX技术实现网页无刷新进度条显示
- 利用AJAX技术实现网页无刷新进度条显示
- 如何实现关闭网页时,弹出一个新网页?
- 利用AJAX技术实现网页无刷新进度条显示
- 网页方式实现MSN的弹出窗口
- [转]winForm:利用窗体的自定义属性实现窗体传值
- [转]winForm:利用窗体的自定义属性实现窗体传值
- JavaScript实现关闭网页弹出确认框
- 让网页实现弹出QQ,MSN窗口功能
- 在网页中实现弹出QQ对话框
- 利用HttpWebRequest来实现提交和获取网页数据
- 利用vb向网页提交表单数据的实现代码