彈窗居中比較煩人的是怎麼才能在任意分辨率下實現居中顯示，為了解決此問題，本文測試了一下案例在此與大家分享，有類似需求的朋友可以學習下
貼代碼
復制代碼 代碼如下:
<!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>彈出窗口_www.jb51.net</title>
<link type="text/css" rel="stylesheet" href="window.css">
<script language="javascript" type="text/javascript" src="../../jquery/jquery.js"></script>
<script language="javascript" type="text/javascript" src="window.js"></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="close.gif">csdn歡迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="right">
<div class="title"><img src="close.gif">csdn歡迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
<div class="window" id="left">
<div class="title"><img src="close.gif">csdn歡迎您</div>
<div class="content">哈哈哈哈哈哈哈</div>
</div>
</body>
</html>
JS
復制代碼 代碼如下:
//窗口的高度
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=(windowHeight-popHeight)/2+scrollTop;
var popX=(windowWidth-popWidht)/2+scrollleft;
$("#center").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}
function popleftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight+scrollTop-popHeight-10;
var popX=scrollleft-5;
$("#left").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}
function poprightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight-popHeight+scrollTop-10;
var popX=windowWidth-popWidht+scrollleft-10;
$("#right").animate({top:popY,left:popX},300).show("slow");},300);
closeWindow();
}
CSS
復制代碼 代碼如下:
<SPAN style="FONT-SIZE: 18px">.window{
width:250px;
background-color:#3FF;
padding:2px;
margin:5px;
position:absolute;
display:none;
}
.content{
height:150px;
background-color:#FFF;
padding:2px;
font-size:14px;
overflow:auto;
}
.title{
padding:2px;
color:#999;
font-size:14px;
}
.title img{
float:right;
cursor:pointer;
}</SPAN>