正文
js关于弹也遮罩层
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
1:什么是遮罩层
遮罩层:我是弹也一个(遮罩层)还有一个(内容层),下面上图片看一效果
我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容).
2: 弹出层效果居中分析
在这个图片中我们还看到我们弹出的层刚好在中间。下面在上个图看清楚的效果:
如果我们是一个“点”放在中间那么当然是$(window).width()/2,但我们是一个层,它有自已的高度和宽度,如果起始还是从中心点开始,你想它会在居间显示,显然
不对,它们靠右边了,所以我们减去它的高和宽 同是除以2
var posLeft = ($(window).width() - div_obj.width()) / 2;
var posTop = ($(window).height() - div_obj.height()) / 2;
3:关一个 z-index
遮盖层的z-index必须要小弹层的z-indx
它们的依次顺是 z-index(弹出层)>z-index(遮盖层)> z-index(body)
4:最后上源码:
本人源码也是参考园子里的朋友的,我这里最重要的是分析它的原理,知道了原理你想怎么添砖加瓦是你的事了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title> <style type="text/css"> /*弹出层*/
.pop-box {
z-index:;
border:2px solid #c4E3FF;
margin:;
display:none;
position:fixed;
background-color:#E1F1FF;
} /*头标题*/
.pop-box header {
padding:12px 12px;
margin:;
height:25px;
} /*头标题样式*/
.pop-box h3 {
color:#;
font-size:13px;
margin:;
} /*内容*/
.pop-box-body {
clear: both;
padding: 13px 13px 13px;
margin: ;
font-size:13px;
} .mask { width:%;
height:%;
position:fixed;
top:;
left:;
background-color:#;
filter: Alpha(Opacity=);
-moz-opacity: 0.8;
opacity: 0.8;
z-index: ; /*这个数值比pop box小*/
} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> function popupDiv(div_id){ var div_obj = $("#" + div_id); var posLeft = ($(window).width() - div_obj.width()) / ; var posTop = ($(window).height() - div_obj.height()) / ; //添加并显示遮罩层 $("<div id='mask'></div>").addClass("mask")
.appendTo("body")
.fadeIn(); //fadeIn() 方法使用淡入效果来显示被选元素
div_obj.css({"top": posTop , "left": posLeft}).fadeIn(); } function hideDiv(div_id) {
$("#mask").remove();
//fadeOut() 方法使用淡出效果来隐藏被选元素
$("#" + div_id).fadeOut();
} </script> </head>
<body>
<div id="pop-div" style="width: 400px;" class="pop-box">
<header>
<h3>标题位置</h3>
</header>
<div class="pop-box-body">
<p>
正文内容
</p>
<input type="button" value="关闭" onclick="hideDiv('pop-div');" style="float: right" />
</div>
</div> <input type="button" id="btnTest" value="弹出" onclick="popupDiv('pop-div');" />
</body>
</html>