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:最后上源码:
本人源码也是参考园子里的朋友的，我这里最重要的是分析它的原理，知道了原理你想怎么添砖加瓦是你的事了
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 6 <style type="text/css"> 7 8 /*弹出层*/ 9 .pop-box { 10 z-index:9999; 11 border:2px solid #c4E3FF; 12 margin:0; 13 display:none; 14 position:fixed; 15 background-color:#E1F1FF; 16 } 17 18 /*头标题*/ 19 .pop-box header { 20 padding:12px 0 0 12px; 21 margin:0; 22 height:25px; 23 } 24 25 /*头标题样式*/ 26 .pop-box h3 { 27 color:#555; 28 font-size:13px; 29 margin:0; 30 } 31 32 /*内容*/ 33 .pop-box-body { 34 clear: both; 35 padding:0 13px 13px 13px; 36 margin: 0; 37 font-size:13px; 38 } 39 40 41 .mask { 42 43 100%; 44 height:100%; 45 position:fixed; 46 top:0; 47 left:0; 48 background-color:#666; 49 filter: Alpha(Opacity=80); 50 -moz-opacity: 0.8; 51 opacity: 0.8; 52 z-index: 9998; /*这个数值比pop box小*/ 53 } 54 55 </style> 56 57 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 58 59 <script type="text/javascript"> 60 61 function popupDiv(div_id){ 62 63 var div_obj = $("#" + div_id); 64 65 var posLeft = ($(window).width() - div_obj.width()) / 2; 66 67 68 var posTop = ($(window).height() - div_obj.height()) / 2; 69 70 71 //添加并显示遮罩层 72 73 $("<div id='mask'></div>").addClass("mask") 74 .appendTo("body") 75 .fadeIn(200); 76 77 //fadeIn() 方法使用淡入效果来显示被选元素 78 div_obj.css({"top": posTop , "left": posLeft}).fadeIn(); 79 80 81 } 82 83 84 function hideDiv(div_id) { 85 $("#mask").remove(); 86 //fadeOut() 方法使用淡出效果来隐藏被选元素 87 $("#" + div_id).fadeOut(); 88 } 89 90 </script> 91 92 </head> 93 <body> 94 <div id="pop-div" style=" 400px;" class="pop-box"> 95 <header> 96 <h3>标题位置</h3> 97 </header> 98 <div class="pop-box-body"> 99 <p> 100 正文内容 101 </p> 102 <input type="button" value="关闭" onclick="hideDiv('pop-div');" style="float: right" /> 103 </div> 104 </div> 105 106 <input type="button" id="btnTest" value="弹出" onclick="popupDiv('pop-div');" /> 107 </body> 108 </html>