【转载】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