【轉載】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