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();
});
有兴趣的朋友，亲自动手测试下，看看本例的效果如何，是否弹出了你想的居中效果呢？
