利用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文件:

时间: 2024-10-08 03:17:23

利用z-index属性实现网页弹出框的相关文章

网页弹出框--播放视频

网页点击弹出框播放视频 1/准备好基础网页.重置样式表什么的都已经写好的网页 2/调入弹出框CSS样式 /*! * ui-dialog.css * Date: 2014-07-03 * https://github.com/aui/artDialog * (c) 2009-2014 TangBin, http://www.planeArt.cn * * This is licensed under the GNU LGPL, version 2.1 or later. * For details

网页弹出框ClientScript,ScriptManager

网页调用客户端弹出框 this.ClientScript.RegisterStartupScript(this.GetType(), "message", "<script>alert('!');</script>"); ajax里要这么用. 有UpdatePanel 需要用下面的代码 ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "

实现网页弹出框后背景不能滑动的效果

我们经常写遮罩层弹出框之类的效果,但是小编最近发现弹出框出现后,它覆盖的背景内容信息却可以滑动,体验很不好,那么如何禁止背景滑动 很简单的属性 弹出框出现后将body设为hidden document.body.style.overflow = "hidden"; 当关闭弹出框的时候body设为auto document.body.style.overflow = "hidden"; 这样就可以实现效果了,一般都是动态添加根据你的事件需求设置body的overflo

BootStrap学习笔记JS插件(一)--模态弹出框

一.弹出框基础 <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss=&quo

Android 学习笔记之AndBase框架学习(二) 使用封装好的进度框,Toast框,弹出框,确认框...

PS:渐渐明白,在实验室呆三年都不如在企业呆一年... 学习内容: 1.使用AbActivity内部封装的方法实现进度框,Toast框,弹出框,确认框...   AndBase中AbActivity封装好了许多方法提供我们去使用,使得在使用的时候更加的方便,只需要传递相关参数即可..省去了我们自己使用基础的函数进行构造...   就好比进度框,Toast框,弹出框,确认框...这些基本的东西都在AndBase的AbActivity封装好了...我们只需要传递参数调用其中内部的方法就可以完成这些视

jsp网页弹出窗口的多种办法

http://blog.csdn.net/huangfoxjava/article/details/2973033 登录|注册     huangfoxjava的专栏 目录视图 摘要视图 订阅 关于jsp网页弹出窗口[很多种方法......] 分类: JSP2008-09-24 14:22 5799人阅读 评论(0) 收藏 举报 jspjavascript框架html脚本浏览器 各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript

JavaScript-1.最简单的程序之网页弹出对话框,显示为Warning---ShinePans

show和set命令是两条用于维护SQLPlus系统变量的命令 : SQL> show all --查看所有系统变量值 SQL>show user --显示当前连接用户 SQL>show error --显示错误(编译function,procedure,package,pl/sql的时候,可以查看具体的错误提示) SQL>set sqlprompt SQL  --设置默认提示符,默认值就是SQL SQL>set linesize 1000 --设置屏幕显示行宽,默认100

针对jquery绑定click事件执行两次,layer弹出框,以及img的map属性应用。

前不久使用jQuery与layer实现一个弹出框,发现在绑定弹出框事件时,事件执行了两次,准确的说是方法同时注册了两次,不分先后执行了两遍,导致弹出框弹出两次.请教同事后,发现原因有可能是jQuery的js与layer的js冲突(具体原因还需要深入了解),通过网络和请教同事,得到了三种处理方法. 方法一:不采用jQuery进行事件的绑定,直接在标签中添加onclick事件. 方法二:采用这种方式$("#item_add_button")[0].onclick = function(){

关闭网页弹出是否关闭的提示

关闭网页弹出是否关闭的提示:在很多网站都有这样的功能,点点击关闭当前页面的时候,就会弹出一个提示框,可以选择关闭或者不关闭当前页面,下面就介绍一下如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /