弹框在当前屏幕完全居中的方法
最近弹框需求越来越多了, 需要在当前屏幕自适应居中, 这就得获取浏览器中的各项高度,才能使弹框在当前屏幕一直居中.
1.css直接点,推荐我自己使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .newpop { width: 100%; height: 100%; margin: 0 auto; display: none; } .newpopbg { width: 100%; height: 100%; /*兼容IE8及以下版本浏览器*/ filter: alpha(opacity = 30); position: fixed; left: 0; top: 0; bottom: 0; right: 0; margin: 0 auto; z-index: 999998; background-color: #666666; -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } .newpop .newpopcon { width: 472px; height: 280px; min-height: 200px; max-height: 500px;/*设定最大最小高度,在这个之间的高度可以自适应*/ position: fixed; background-color: #fff; top: 0; right: 0; left: 0; bottom: 0; margin: auto; text-align: center; z-index: 999999; } .newpop .newpopcon h3 { background: #f87c06; margin: 0; line-height: 54px; color: #fff; text-align: center; } .newpop .newpopcon input { cursor: pointer; background-color: #fff; color: #8a8a8a; border: 1px solid #c5c5c7; width: 102px; height: 40px; line-height: 40px; border-radius: 5px; -moz-border-radius: 5px; } </style> </head> <body> <div id="newPop" class="newpop" style="display: block;"> <div class="newpopbg"></div> <div class="newpopcon" > <h3>提示</h3> <p>内容</p> <p>内容</p> <p>内容</p> <div class="newpop-btn"> <input type="button" class="newpop-btnl" value="取消"> <input type="button" class="newpop-btnr" value="确定"> </div> </div> </div> </body> </html>
2.使用js之后,发现仅仅把css中的 'position:absolute;'改成 'position: fixed;right:0;left:0;top:0;bottom:0;'
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .pop-up{ display: none; width: 100%; height: 100%; color: #333; } .pop-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666666; -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); z-index: 100000; } .pop-contain { position: absolute; display: none; z-index: 100001; width: 526px; min-height: 20px; max-height: 400px; margin: auto; overflow: auto; } .pop-contain .pop-son-contain{ background: #fff; padding-bottom: 80px; } .pop-contain .pop-title { text-align: center; font-weight: 0; position: relative; font-size: 22px; line-height: 60px; color: #333; border-bottom: 1px solid #eee; background: #f8f8f8; } .pop-contain .pop-title span { position: absolute; top: 18px; right: 10px; width: 30px; line-height: 26px; height: 30px; text-align: center; cursor: pointer; } .pop-tip-text{ width: 80%; margin: 40px auto 40px; line-height:30px; color: #333; font-size:16px; } .pop-tip-text p{ font-size:18px; color:#000; margin: auto; } .pop-tip-btn{ text-align: center; } .pop-tip-btn input{ padding:0 42px; height: 40px; line-height: 40px; border: none; border: none; background: #52a9f2; color: #fff; font-size:14px; cursor: pointer; } </style> </head> <body> <input type="button" value="点击弹框" onclick="checkForm()" style="font-size: 30px; padding: 10px 20px;"/> <div id="checkFormPopHtml" class="pop-up"> <div class="pop-bg"></div> <div class="pop-contain" id="pop-contain"> <div class="pop-son-contain"> <div class="pop-title"> 提示 <span id="offPop" onclick ="clikcNone()">✕</span> </div> <div class="pop-tip-btn"> <input type="button" id="popSurebtn" style="cursor:pointer" value="确定" onclick ="clikcNone()" /> </div> </div> </div> </div> <script src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> //调整重加弹框居中开始 function leftTop(obj){ var screenWidth = $(window).width(); var screenHeight = $(window).height(); var scrolltop = $(document).scrollTop(); var scrollleft = $(document).scrollLeft(); var objLeft = (screenWidth - obj.width())/2 + scrollleft ; var objTop = (screenHeight - obj.height())/2 + scrolltop; obj.css({left: objLeft + 'px', top: objTop + 'px'}); // $("body").css({"overflow":"hidden","height":"100%"}) } function center(obj) { leftTop(obj); //浏览器窗口大小改变时 $(window).resize(function() { leftTop(obj); }); //浏览器有滚动条时的操作、 $(window).scroll(function() { leftTop(obj); }); } //显示函数 function clikcShow(){ $('#checkFormPopHtml').css("display","block");//显示总弹框父元素 center($("#pop-contain"));//再调用弹框居中 $('#pop-contain').css("display","block");//然后显示弹框 } //调整重加弹框居中结束 function clikcNone(){ $('#checkFormPopHtml,#pop-contain').css('display','none'); } function checkForm(){ clikcShow(); } </script> </body> </html>
