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

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();
 
}

function popRightButtomWindow(){
 
 //先清空上一次的延迟
 clearTimeout(timeout);
 
 timeout=setTimeout(function (){
 //初始化参数
 init();
 
 //计算弹出窗口的左上角Ｙ的偏移量
 var popY=windowHeight+scrollTop-popHeight-10;
 var popX=windowWidth+scrollLeft-popWidth-10;
 
 
 //设定窗口的位置
 
 //$("#center").css("top",popY).css("left",popX).show("slow");
 $("#right").animate({top:popY,left:popX},300).show("slow");
 
 
 
 
 },300);
 
 
 //关闭窗口
 closeWindow();
 
}

最后

以上就是高兴香水为你收集整理的使用jquery实现弹出窗口效果（居中、左下角、右下角）的全部内容，希望文章能够帮你解决使用jquery实现弹出窗口效果（居中、左下角、右下角）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。