关闭

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

标签: jqueryfunction
1581人阅读 评论(0) 收藏 举报

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(){
 
 //找到X号的图片,加单击事件,并且关闭窗口
 $(".title img").click(function (){
  
  $(this).parent().parent().hide("slow");
  
  
  });
 
 
 
 }

 


//定义弹出居中窗口的方法
function popCenterWindow(){
 //先清空上一次的延迟
 clearTimeout(timeout);
 
 timeout=setTimeout(function (){

 init();
 
 //计算弹出窗口的左上角Y的偏移量
 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();
 
 //计算弹出窗口的左上角Y的偏移量
 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();
 
 //计算弹出窗口的左上角Y的偏移量
 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();
 
}

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:52767次
    • 积分:1255
    • 等级:
    • 排名:千里之外
    • 原创:82篇
    • 转载:1篇
    • 译文:0篇
    • 评论:5条
    最新评论