jquery实现弹出窗口居中效果

1.声明变量:
var $browser=$(window);
var winWidth;
var winHeight;

var scrollLeft;
var scrollTop;

var left=0,top=0;
var $currentWin=$(“div.win”);//弹出窗口
var clientWidth;
var clientHeight;
2.定义方法来计算窗口居中的位置:
function calPosition(){
winWidth=$browser.width();
winHeight=$browser.height();

scrollLeft=$browser.scrollLeft();
scrollTop=$browser.scrollTop();

clientWidth=$currentWin.outerWidth();
clientHeight=$currentWin.outerHeight();

left=scrollLeft+(winWidth-clientWidth)/2;
top=scrollTop+(winHeight-clientHeight)/2;
}
3.定义方法显示窗口:
function show(){
$currentWin.animate({“left”:left+”px”,”top”:top+”px”},300).show();
}
给网页上的按钮绑定事件,点击时显示弹窗口和遮罩层
$(“#btn”).click(function(){
calPosition();
show();
$(“#overlay”).show();
});
4.给弹出窗口的关闭按钮绑定事件:
$currentWin.find(“h2>img”).click(function(){
$currentWin.hide();
$(“#overlay”).hide();//遮罩层
});
5.绑定滚动条事件并设置让鼠标离开滚动条后再计算窗口位置:
var scrollTimeout;
$browser.scroll(function(){
clearTimeout(scrollTimeout);
scrollTimeout=setTimeout(function(){
if($currentWin.is(“:animated”)){
$currentWin.stop(true);
}
calPosition();
show();
},300);
});
6.浏览器窗口大小变化时绑定事件计算窗口位置:
$browser.resize(function(){
calPosition();
if($currentWin.is(“:animated”)){
$currentWin.stop(true);
}
show();
});

Related Posts Plugin for WordPress, Blogger...