jQuery弹出层始终垂直居中于当前屏幕
一般网站上肯定有一些弹出框,不论弹出框的大小,都需要他在当前窗口垂直居中。之前手上就有一个jQuery的例子,后来才发现,他只能在第一屏垂直居中,如果滑动滚动条,弹出的框就在上方,不是很方便。请教朋友后稍作修改,成了现在的例子。
代码分析
注释已经写得很清楚了,看得懂jQuery的应该都看得懂
function popup(popupName){ var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度 _windowHeight = $(window).height(),//获取当前窗口高度 _windowWidth = $(window).width(),//获取当前窗口宽度 _popupHeight = popupName.height(),//获取弹出层高度 _popupWeight = popupName.width();//获取弹出层宽度 _posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight; _posiLeft = (_windowWidth - _popupWeight)/2; popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position } $(function(){ $(".btn1").click(function(){ popup($("#div1")); }); $(".btn2").click(function(){ popup($("#div2")); }); });
原理分析
原理很简单,获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可。
$(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚。
最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间。
还有一点要提示一下,尽量把弹出框的代码写到外层,例如最底部。因为如果你写到里面,他的外面如果哪里写了定位,那么弹出框将在这个容器里垂直居中,而不是在窗体的垂直居中了。相信熟练使用相对定位、绝对定位的朋友应该懂我意思。
>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/339.html
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。