js關於彈也遮罩層

標籤：style   blog   http   io   color   ar   os   使用   sp   

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             width: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="width: 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>

 

js關於彈也遮罩層