關於頁面中彈窗的定位問題

桔子_Lynn發表於2016-12-08

在做運營活動頁面的時候，有時候一些活動會有很多彈窗，而彈窗要定位在頁面中央的位置，即對div進行水平垂直居中，這個並不難做

運營活動通常要用zepto進行開發，輕便簡潔，方便操作頁面中的DOM，但是當用zepto中的show和hide來切換彈窗的時候便會出現問題

這個問題我已經遇到過好幾次了，之前想不通，後來才發現問題所在：

HTML程式碼如下：

 1 <div class="button" id="button1">點選出現彈框1</div>
 2 <div class="button" id="button2">點選出現彈框2</div>
 3 
 4 <div class="dialog-wrap"> 
 5    <!-- 第一個彈窗 -->
 6     <div class="dialog" id="dialog1">
 7         <div>this is the first dialog</div>
 8     </div>
 9    <!-- 第二個彈窗 -->
10     <div class="dialog" id="dialog2">
11         <div>this is ths second dialog</div>
12     </div> 
13     <!-- 半透明蒙層 -->
14     <div class="layer"></div>
15 </div>

css程式碼如下：

 1 .dialog-wrap{
 2    width: 100%;
 3    height: 100%;
 4    display: none;
 5    position: absolute;
 6    top: 0;
 7    left: 0;
 8 }
 9 .layer{
10    width: 100%;
11    height: 100%;
12    position: absolute;
13    top: 0;
14    left: 0;
15    background: rgba(0,0,0,.85);
16    z-index: 999;
17 }
18 .dialog{  
19    position: absolute;
20    top: 50%;
21    left: 50%;
22    transform: translate(-50%,-50%);
23    -webkit-transform:translate(-50%,-50%);
24    z-index: 1000;    
25 }
26 #dialog1{
27    width: 500px;
28    height: 200px;
29    border: 1px solid black;
30    background: #fff;
31    border-radius: 10px;
32    text-align: center;
33    line-height: 200px;
34    font-size: 30px;
35    display: none;
36 }
37 #dialog2{
38    width: 500px;
39    height: 300px;
40    background: #fff;
41    border-radius: 10px;
42    line-height: 300px;
43    text-align: center;
44    font-size: 30px;
45    display: none;
46 }

js程式碼如下所示：

 1 $('#button1').on('click',function(){
 2     $('.dialog-wrap').show();
 3     $('#dialog1').css('display','block');
 4 })
 5 $('#button2').on('click',function(){
 6     $('.dialog-wrap').show();
 7     $('#dialog2').show();
 8 })
 9 $('.layer').on('tap',function(){
10     $('.dialog-wrap').hide();
11     $('#dialog1').hide();
12     $('#dialog2').hide();
13 })

對彈窗1和彈窗2的不同操作，第一個彈窗是 $('#dialog1').css('display','block');  第二個彈窗是  $('#dialog2').show();

然後來看對應的效果：

        

第一個彈窗在頁面中央位置，而第二個彈窗卻偏了很多

以前我在寫彈窗的切換時為了方便都是用的show和hide來實現，但是明明定位在中央的彈窗在用了show之後卻偏了，

當時不明白為什麼，只能在對應的彈窗中再加上下面的程式碼:margin-left:-250px;margin-top:-100px;  

這樣是有作用的，彈窗顯示在頁面中央，但是如果頁面中有很多個彈窗，而且每個彈窗的大小樣式都不一樣時，這樣就需要為每個彈窗單獨定位，比較麻煩

後來在除錯控制檯的時候，發現用了show的彈窗被自動加上了一些樣式，如下所示：

這才發現，原來元素在用了show之後，會被預設加上如上程式碼，而transform：scale（1,1）使元素顯示的同時剛好覆蓋住了我對彈窗設計的樣式：transform: translate(-50%,-50%);

所以彈窗才會偏，而用了  $('#dialog1').css('display','block');  就不會被覆蓋。

做了好幾個活動之後終於發現問題所在啦，以後再也不用為每個彈窗單獨定位了，鼓掌！！

相關文章