快捷導(dǎo)航

jQuery彈出層始終垂直居中相對(duì)于屏幕或當(dāng)前窗口

更新時(shí)間：2013年04月01日 18:10:18 作者：

碰到?jīng)]有固定高或者固定寬或者固定高和寬的時(shí)候，我們就需要用JS去處理，去動(dòng)態(tài)獲取當(dāng)前窗口高或者寬；今天弄了2種情況，一個(gè)是相對(duì)于屏幕窗體，一個(gè)是相對(duì)于當(dāng)前的窗口，看代碼

彈出層永遠(yuǎn)是一個(gè)前端必須搞定的東西，一般情況下，如果彈出層有固定的高和寬，用樣式即可搞定，但是如果碰到?jīng)]有固定高或者固定寬或者固定高和寬的時(shí)候，我們就需要用JS去處理，去動(dòng)態(tài)獲取當(dāng)前窗口高或者寬；今天弄了2種情況，一個(gè)是相對(duì)于屏幕窗體，一個(gè)是相對(duì)于當(dāng)前的窗口，看代碼，或許對(duì)你有用：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無(wú)標(biāo)題文檔</title> 
<style> 
body{margin:0px;padding:0px} 
#div1{background:#F00;color: #FFF; display:none;position:absolute;} 
#div2{background:#333333;color: #FFF;width:400px;display:none; position:absolute;} 
</style> 
<Script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
//瀏覽器窗口垂直居中 
<!-- 
<Script type="text/javascript"> 
function popup(popupName){ 
var _scrollHeight = $(document).scrollTop(),//獲取當(dāng)前窗口距離頁(yè)面頂部高度 
_windowHeight = $(window).height(),//獲取當(dāng)前窗口高度 
_windowWidth = $(window).width(),//獲取當(dāng)前窗口寬度 
_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"});//設(shè)置position 
} 
$(function(){ 
$(".btn1").click(function(){ 
popup($("#div1")); 
}); 
$(".btn2").click(function(){ 
popup($("#div2")); 
}); 
}); 
</script> 
--> 
//當(dāng)前窗口垂直居中 
<Script type="text/javascript"> 
function popup(popupName){ 
_windowHeight = $(".wrap").height(),//獲取當(dāng)前窗口高度 
_windowWidth = $(".wrap").width(),//獲取當(dāng)前窗口寬度 
_popupHeight = popupName.height(),//獲取彈出層高度 
_popupWeight = popupName.width();//獲取彈出層寬度 
_posiTop = (_windowHeight - _popupHeight)/2; 
_posiLeft = (_windowWidth - _popupWeight)/2; 
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//設(shè)置position 
} 
$(function(){ 
$(".btn1").click(function(){ 
popup($("#div1")); 
}); 
$(".btn2").click(function(){ 
popup($("#div2")); 
}); 
}); 
</script> 
</head> 
<body > 
<div > 
<input class="btn1" type="button" value="1"/></div> 
<input class="btn2" type="button" value="2"/></div> 
<div style="width:500px; background:#ccc; position:relative; top:100px; left:200px;" class="wrap"> 
我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊<br>我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊<br>我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊<br>我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊<br>我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊 
<br>我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊我是當(dāng)前窗口啊 
<div id="div1">我是彈出窗口1111啊<br>我是彈出窗口1111啊<br>我是彈出窗口1111啊<br>我是彈出窗口1111啊<br>我是彈出窗口1111啊<br>我是彈出窗口1111啊<br>我是彈出窗口1111啊</div> 
<div id="div2">我是彈出窗口2222啊<br>我是彈出窗口2222啊<br>我是彈出窗口2222啊<br>我是彈出窗口2222啊<br>我是彈出窗口2222啊</div> 
</div> 
</body> 
</html> 