弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示
为了解决此问题
本文测试了一下案例在此与大家分享
有类似需求的朋友可以学习下
贴代码
复制代码 代码如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Transitional//EN" "
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>弹出窗口_www
jb
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)/
+scrollTop;
var popX=(windowWidth
popWidht)/
+scrollleft;
$("#center")
animate({top:popY
left:popX}
)
show("slow");}
);
closeWindow();
}
function popleftWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight+scrollTop
popHeight
;
var popX=scrollleft
;
$("#left")
animate({top:popY
left:popX}
)
show("slow");}
);
closeWindow();
}
function poprightWindow(){
clearTimeout(timeout);
timeout=setTimeout(function (){
init();
var popY=windowHeight
popHeight+scrollTop
;
var popX=windowWidth
popWidht+scrollleft
;
$("#right")
animate({top:popY
left: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>
