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

原创 2012年03月27日 20:50:41

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

 

Jquery插件,右下角弹窗提醒,无视框架

推荐其它几款插件: http://www.jqueryrain.com/?rv0ica8W
  • ful1021
  • ful1021
  • 2014年08月14日 12:08
  • 1903

Jquery--仿制360右下角弹出窗口

先发浏览器效果图,给大家看。 要实现这样的效果,按照思路,第一步,写好CSS布局,将图片放到浏览器右下角的位置 CSS代码很灵活,我写的只是简单的一种而已,仅供参考: body{ma...
  • SCOTT_1TIGER
  • SCOTT_1TIGER
  • 2015年05月14日 14:30
  • 592

jQuery右下角广告动画效果弹出

  • 2015年04月04日 00:31
  • 131KB
  • 下载

【jQuery】纯js的右下角弹窗

这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出。 采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut...
  • yongh701
  • yongh701
  • 2016年07月28日 17:43
  • 4467

jquery右下角弹出框

  • 2013年05月25日 11:07
  • 29KB
  • 下载

jQuery屏幕右下角消息提示框

  • 2017年05月09日 18:08
  • 36KB
  • 下载

jquery实现居中、左下角、右下角窗口效果

jquery_windows.html文件 弹出窗口 $(document).ready(function (){ //利用toggle方法实现显示和隐藏 $(...
  • zhaoxinglei0309
  • zhaoxinglei0309
  • 2012年03月27日 21:07
  • 2158

从屏幕左下角弹出Dialog动画

积累
  • coder_bai
  • coder_bai
  • 2016年12月27日 13:21
  • 529

jQuery弹出窗口完整代码

原文链接 http://www.cnblogs.com/jihua/archive/2012/10/08/2715175.html         jQuery弹出窗口...
  • qq_34482827
  • qq_34482827
  • 2016年07月11日 10:56
  • 193

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

JS代码: // 定义一些变量 //获得窗口的高度 var windowHeight; //获得窗口的宽度 var windowWidth; //获得弹窗的高度 var popHeigh...
  • zhangwei10php
  • zhangwei10php
  • 2012年03月27日 20:50
  • 1768
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jquery实现弹出窗口效果(居中、左下角、右下角)
举报原因:
原因补充:

(最多只允许输入30个字)