使用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右下角弹窗效果

复制代码保存到txt文本,改后缀为.html。注意引进两个js文件。jquery.js可以到官网下,jquery.messager.js我上篇博文发了,可以下载。 jquery右下角...

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

推荐其它几款插件: http://www.jqueryrain.com/?rv0ica8W

【jQuery】纯js的右下角弹窗

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

jQuery实现弹出居、右下角、左下角窗口效果(一)

今天给大家带来的是,实用jQuery技术实现各种弹窗效果,比如弹出指定位置的窗口(左下角、右下角、居中...)等,尤其是弹出右下角窗口特别实用,如果能够跟随滚动条一起滚动,那就非常good了!一些企业...

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)     接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要...

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)

感谢这些天一直支持我的朋友们,也有很多朋友在QQ上给我留言,表达了他们看后我的文章后自己的一点想法,也希望更多的朋友和我一起交流,一起学习。也对支持我的原创论坛的朋友们表示衷心的感谢,我也会一如既往的...

jQuery实现弹出居、右下角、左下角窗口效果(二)

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)     接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要...

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

jquery_windows.html文件 弹出窗口 $(document).ready(function (){ //利用toggle方法实现显示和隐藏 $(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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