关于页面中弹窗的定位问题
在做运营活动页面的时候，有时候一些活动会有很多弹窗，而弹窗要定位在页面中央的位置，即对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'); 就不会被覆盖。
做了好几个活动之后终于发现问题所在啦，以后再也不用为每个弹窗单独定位了，鼓掌！！
