首页 > 代码库 > 弹出框始终保持居中（包括有滚动条和窗体缩放时）
弹出框始终保持居中（包括有滚动条和窗体缩放时）
之前写的代码，都是在当前窗口位于居中，可是一旦窗口缩小或者放大都不是位于居中的位置了，但是一直想写的一个类似于alert弹出窗口的效果。
原理很简单：
获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来横向居中和垂直居中的坐标。但是滑动了滚动条怎么依然横向居中和垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度和横向滚动条移动的宽度，加到刚刚的y轴坐标即可。
$(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。
最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到窗体中间。
效果体验：http://runjs.cn/detail/tj4jq1qr
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹出确认框始终位于窗口正中央</title><style type="text/css">.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); display: none; z-index: 99; }.alertBox {position: absolute; display: none; width: 250px; height: 100px; border: 1px solid #ccc; background: #ececec; text-align: center; z-index: 101; }</style><script type="text/javascript" src=http://www.mamicode.com/"http://code.jquery.com/jquery.js"></script><script type="text/javascript">$(document).ready(function() { $(‘.btn‘).click(function() { $(‘.mask‘).css({‘display‘: ‘block‘}); center($(‘.alertBox‘)); $(‘.alertBox‘).css({‘display‘: ‘block‘}); }); // 居中 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‘}); } function center(obj) { leftTop(obj); //浏览器窗口大小改变时 $(window).resize(function() { leftTop(obj); }); //浏览器有滚动条时的操作、 $(window).scroll(function() { leftTop(obj); }); } //确定取消的操作 $(‘.btn1,.btn2‘).click(function(){ $(‘.mask,.alertBox‘).hide(); }) });</script></head><body><input type="button" class="btn" value=http://www.mamicode.com/"btn" style="margin-top:2500px; margin-left:800px;"/><div style="height:3000px; width:3000px;">弹出确认框始终位于窗口的正中央</div><div class="mask"></div><div class="alertBox"> <p>确定要删除吗？</p> <p><input type="button" value=http://www.mamicode.com/"确定" class="btn1"/> <input type="button" value=http://www.mamicode.com/"取消"class="btn2"/></p></div></body></html>
其实，事实上，无意之间还想到一个比较好的解决方案，就是这个弹出框用固定定位position=‘fixed’,然后left和top各定位50%。就会实现上面辣么多jquery代码实现的效果。
弹出框始终保持居中（包括有滚动条和窗体缩放时）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。