Js 任意分辨率下居中显示弹窗的简单示例

弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示。感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。<br><strong>经测试代码如下：</strong>
1，html部分


<!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>弹出窗口</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>

<!--   来自 编程之家 jb51.cc （jb51.cc）-->

2，js代码部分


<script>
/**
 * 任意分辨率下居中显示弹窗
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
//窗口的高度
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,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,300);
closeWindow();
}
</script>

3，CSS代码部分


.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;
}

弹窗

Js 任意分辨率下居中显示弹窗的简单示例

相关文章