Js控制彈窗實現在任意分辨率下居中顯示

彈窗居中比較煩人的是怎麼才能在任意分辨率下實現居中顯示為了解決此問題本文測試了一下案例在此與大家分享有類似需求的朋友可以學習下

　　貼代碼

復制代碼代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>彈出窗口_wwwjbnet</title>
<link type="text/css" rel="stylesheet" href="windowcss">
<script language="javascript" type="text/javascript" src="//jquery/jqueryjs"></script>
<script language="javascript" type="text/javascript" src="windowjs"></script>
<script language="javascript">
$(document)ready(function (){
$("#btn_center")click(function (){
$(window)scroll(function (){
popcenterWindow();
});
});
$("#btn_right")click(function (){
$(window)scroll(function (){
poprightWindow();
});
});
$("#btn_left")click(function (){
$(window)scroll(function (){
popleftWindow();
});
});
});
</script>
</head>
<body>
<input type="button" value="彈出居中的窗口" id="btn_center">
<input type="button" value="彈出居右的窗口" id="btn_right">
<input type="button" value="彈出居左的窗口" id="btn_left">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="window" id="center">
<div class="title"><img src="closegif">csdn歡迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="right">
<div class="title"><img src="closegif">csdn歡迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="left">
<div class="title"><img src="closegif">csdn歡迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
</body>
</html>

復制代碼代碼如下:
//窗口的高度
var windowHeight;
//窗口的寬度
var windowWidth;
//彈窗的高度
var popHeight;
//彈窗的寬度
var popWidth;
//滾動條滾動的高度
var scrollTop;
//滾動條滾動的寬度
var scrollleft;
//延時的時間
var timeout;
function init(){
//獲得窗口的高度
windowHeight=$(window)height();
//獲得窗口的寬度
windowWidth=$(window)width();
//獲得彈窗的高度
popHeight=$("window")height();
//獲得彈窗的寬度
popWidht=$("window")width();
//獲得滾動條的高度
scrollTop=$(window)scrollTop();
//獲得滾動條的寬度
scrollleft=$(window)scrollLeft();
}
//定義關閉窗口
function closeWindow(){
$("title img")click(function (){
$(this)parent()parent()hide("slow");

});

}
//定義彈出窗口的方法
function popcenterWindow(){
//先清空上一次的延遲
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=(windowHeightpopHeight)/+scrollTop;
var popX=(windowWidthpopWidht)/+scrollleft;
$("#center")animate({top:popYleft:popX})show("slow");});
closeWindow();
}
function popleftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight+scrollToppopHeight;
var popX=scrollleft;
$("#left")animate({top:popYleft:popX})show("slow");});
closeWindow();
}
function poprightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeightpopHeight+scrollTop;
var popX=windowWidthpopWidht+scrollleft;
$("#right")animate({top:popYleft:popX})show("slow");});
closeWindow();
}

　　
CSS

復制代碼代碼如下:

　　
<SPAN style="FONTSIZE: px">window{
width:px;
backgroundcolor:#FF;
padding:px;
margin:px;
position:absolute;
display:none;
}
content{
height:px;
backgroundcolor:#FFF;
padding:px;
fontsize:px;
overflow:auto;
}

title{
padding:px;
color:#;
fontsize:px;
}
title img{
float:right;
cursor:pointer;
}</SPAN>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19817.html