使用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】纯js的右下角弹窗

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

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

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

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

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

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

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

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

jquery_windows.html文件 弹出窗口 $(document).ready(function (){ //利用toggle方法实现显示和隐藏 $(...

jQuery实现在右下角弹出提示框

用jQuery实现这个功能其实非常简单,网上的例子太多太多了。不过,那些例子一般没有涉及到后台往前台传值的问题。在本文中这个问题会得到解决。 在实际应用中,提示框都是自动弹出的,因此,jQuery函数...

实现右下角弹出渐隐渐现提示小窗口 附带 源码及效果图

package advancedJavaLearning; import java.awt.Toolkit; import java.awt.event.WindowAdapter; import j...

js窗口右下角弹出框效果(找了很久,不容易)

原文地址  http://www.aq82.com/blog/Archiver/view.asp?id=177

使用jQuery的message插件实现右下角弹出消息框

有时在页面加载的时候,需要在页面的右下角弹出一个小的提示框,显示一些提示信息给用户,通过使用jQuery的message插件,可以很方便的实现这个效果,在使用之前先介绍一下message插件中的方法的...

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

先发浏览器效果图,给大家看。 要实现这样的效果,按照思路,第一步,写好CSS布局,将图片放到浏览器右下角的位置 CSS代码很灵活,我写的只是简单的一种而已,仅供参考: body{ma...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jquery实现弹出窗口效果(居中、左下角、右下角)
举报原因:
原因补充:

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