当前位置: 编程技术>jquery
Jquery 弹出窗口居中效果的实现代码
来源: 互联网 发布时间：2014-09-03
本文导语: 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，定义方法 计算窗口居中的位置： 代码示例: f...
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;
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;
}
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();
});
$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();//遮罩层
});
$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);
});
$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();
});
calPosition();
if($currentWin.is(":animated")){
$currentWin.stop(true);
}
show();
});
有兴趣的朋友，亲自动手测试下，看看本例的效果如何，是否弹出了你想的居中效果呢？
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。