使用jquery实现弹出窗口效果（居中、左下角、右下角）

最新推荐文章于 2025-07-12 09:09:00 发布

原创最新推荐文章于 2025-07-12 09:09:00 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function

这篇博客介绍了如何使用jQuery实现弹出窗口的居中、左下角和右下角显示效果。通过定义变量获取窗口和弹窗尺寸，计算偏移量，并利用animate()方法平滑定位。同时，文中还提供了关闭窗口的函数实现。

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();
popWidth=$(".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-popWidth)/2+scrollLeft;

//设定窗口的位置

$("#center").animate({top:popY,left:popX},300).show("slow");
},300);

closeWindow();

}

//定义弹出左下角的窗口效果
function popLeftButtomWindow(){
//先清空上一次的延迟
clearTimeout(timeout);

timeout=setTimeout(function (){
//初始化参数
init();

//计算弹出窗口的左上角Ｙ的偏移量
var popY=windowHeight+scrollTop-popHeight-10;
var popX=scrollLeft;

//设定窗口的位置

$("#left").animate({top:popY,left:popX},300).show("slow");

},300);
closeWindow();

}