jQuery弹出窗口的实现

原创 2012年03月29日 21:28:54

jQuery弹出窗口

今天有李伟老师话费了一上午的时间给我们细致的讲解了弹出窗口的效果,感觉这个功能确实很强大,写起来也并不是很难,需要简单的JS结合来完成这个相应的效果。听了老师说,在企业中用到这个功能的确实很多。在各个网站上我们也应该都见过相应的,当我们访问一个网站时,大多数都是在右下角,会自动的弹出一个窗口来。

我们先来看一下在右下角弹出窗口的效果:

   其他的位置效果都是一样的!

那么下面我么就主要来看一下功能实现的过程。

一、首先我们要先完成页面中的静态效果。如下代码:

<body>

    <input type="button" id="btn1" value="弹出居左窗口">

    <input type="button" id="btn2" value="弹出居中窗口">

    <input type="button" id="btn3" value="弹出居右窗口">

    <div id="left" class="window">

    <div class="title">居左窗口:CSDN欢迎你!<img src="images/close.jpg"/></div>

    <div class="content">CSDN,李伟老师讲课呢!</div>

    </div>

    <div id="right" class="window">

    <div class="title">居右窗口:CSDN欢迎你!<img src="images/close.jpg"/></div>

    <div class="content">CSDN,李伟老师讲课呢!</div>

    </div>

    <div id="center" class="window">

    <div class="title">居中窗口:CSDN欢迎你!<img src="images/close.jpg"/></div>

    <div class="content">CSDN,李伟老师讲课呢!</div>

    </div>

</body>

 

这段代码,我们首先要设置3个按钮,当我们点击按钮后,会给我们在中间的位置,左下角的位置,右下角的位置都弹出相应的窗口来,看一下不同的效果。

二、 这时我们要设置好页面中窗口相应的样式。我们用编写CSS样式来实现。下面是我们的CSS样式的设置。

代码如下:

.window{

    width:250px;

    background-color: #d0def0;

    padding:2px;

    margin:5px;

    position:absolute;

    display: none;   

}

.title{

    font-size: 15px;

    padding: 3px;

}

.title img{

    float: right;

    cursor:pointer;

}

.content{

    font-size:14px;

    height:150px;

    background-color: #FFFFFF;

    padding: 2px;

    overflow: auto;

   

}

三、 当我们将页面的效果都设置好后,接下来就要编写我们的JS文件了,来实现点击按钮后,为我们在相应的位置弹出窗口的效果,以及它弹出的窗口在页面中,无论怎样滚动滚动条,它的位置依旧是页面中间的位置或左下角或右下角。

代码中我注释,就是对代码相应的解释。

//窗口的宽度

var windowWidth;

 

//窗口的高度

var windowHeight;

 

//弹窗的高度

var popHeight;

 

//弹窗自身的宽度

var popWidth;

 

//获得滚动条距顶端滚动的离

var scrollTop;

 

//获得滚动条距左端滚动的离

var scrollLeft;

 

//定义延迟时间

var timeout;

 

function init(){

    //得到windowWidth

    windowWidth = $(window).width();

    windowHeight = $(window).height();

    

    popWidth=$(".window").width();

    popHeight=$(".window").height();

    

    scrollTop = $(window).scrollTop();

    

    scrollLeft = $(window).scrollLeft();

}

//弹出居中窗口

function popCenterWindow(){

    //两次操作,清空上一次的延迟

    clearTimeout(timeout);

    //延迟执行下面的方法

    timeout = setTimeout(function(){

    //进行参数初始化

    init();

    //弹窗的左上角   x坐标=(窗口宽-弹窗宽度)/2

    var popX = (windowWidth-popWidth)/2;

    //弹窗的左上角   y坐标=(窗口高度-弹窗高度)/2

    var popY = (windowHeight-popHeight)/2+scrollTop;

    

    //让弹窗显示到设定的位置

    //$("#center").css("left",popX).css("top",popY).show("slow");

    $("#center").animate({left:popX,top:popY},100).show("slow");

    

    //延迟时间

    },300);

    //调用关闭窗口方法

    closeWindow();

}

//关闭弹出的窗口

function closeWindow(){

    //找到X图片

    $(".title img").click(function(){

       // -找到的是title--找到的是div 隐藏

       $(this).parent().parent().hide("slow");

       

    });

    

}

//弹出居左窗口

function popLeftWindow(){

    //两次操作,清空上一次的延迟

    clearTimeout(timeout);

    //延迟执行下面的方法

    timeout = setTimeout(function(){

       

    //进行参数初始化

    init();

    //弹窗的左上角   x坐标  滚动条滚动的距离,如果没有滚动条,该值为0

    var popX = scrollLeft;

    //弹窗的左上角   y坐标=(窗口高度-弹窗高度+滚动条的距离

    var popY = windowHeight-popHeight+scrollTop-10;

    

    //让弹窗显示到设定的位置

    //$("#left").css("left",popX).css("top",popY).show("slow");

    $("#left").animate({left:popX,top:popY},100).show("slow");

    

    //延迟时间

    },300);

    //调用关闭窗口方法

    closeWindow();

}

 

//弹出居右窗口

function popRightWindow(){

    //两次操作,清空上一次的延迟

    clearTimeout(timeout);

    //延迟执行下面的方法

    timeout = setTimeout(function(){

           

    //进行参数初始化

    init();

    //弹窗的右下角   x坐标  滚动条滚动的距离,如果没有滚动条,该值为0

    var popX = windowWidth-popWidth+scrollLeft-10;

    //弹窗的右下角   y坐标=(窗口高度-弹窗高度+滚动条的距离

    var popY = windowHeight-popHeight+scrollTop-10;

    

    //让弹窗显示到设定的位置

    //$("#right").css("left",popX).css("top",popY).show("slow");

    $("#right").animate({left:popX,top:popY},100).show("slow");

    

    //延迟时间

    },300);

    //调用关闭窗口方法

    closeWindow();

}

 

四、 写好JS文件后,我们要在JSP页面写触发的事件了。

在这之前,我们要将相应的文件引入进来:如下:

<link rel="stylesheet" type="text/css" href="css/window.css">

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>

    <script language="javascript" type="text/javascript" src="js/window.js"></script>

下面就是我们实现的代码:

<script type="text/javascript">

    $(document).ready(function(){

       //增加按钮的单击事件

       $("#btn2").click(function(){

           //调用弹出

           $(window).scroll(function(){

              //调用弹出

           popCenterWindow();

           });

       });

       

       $("#btn1").click(function(){

           //调用弹出

           $(window).scroll(function(){

              //调用弹出

           popLeftWindow();

           });

       });

       

       $("#btn3").click(function(){

           

           //调用弹出

           $(window).scroll(function(){

              //调用弹出

           popRightWindow();

           });

       });

    });

</script>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...

JQuery实现的弹窗效果

这是笔者实际项目中的一个需求,我们先来看看特效。页面加载时弹出窗口,点击关闭案例,窗口消失并呈现动画效果。 实现代码如下: <html xmlns="http://www.w3.org/1999/

Jquery实现网页跳转或用命令打开指定网页!

Jquery实现网页跳转或用命令打开指定网页! location.href = "www.baidu.com"; location.href = "aa.aspx";

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

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

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

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

使用Jquery仿模态对话框插件Remodal实现弹出响应窗口

remodal是一个轻量级、扁平化、响应式模态窗口,可以监测浏览器的大小自适应的的窗口。使用声明式状态符号和哈希(Hash)跟踪。所有现代的浏览器都支持。 首先它是一个插件。下载之后解压,dist中...

jquery实现弹出窗口效果

用jquery实现图片任意点击,到任意地方去,很好用也很好看的效果 弹出窗口效果 .window{ width:250px; background-color:#d0def0; pos...

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

感谢这些天一直支持我的朋友们,也有很多朋友在QQ上给我留言,表达了他们看后我的文章后自己的一点想法,也希望更多的朋友和我一起交流,一起学习。也对支持我的原创论坛的朋友们表示衷心的感谢,我也会一如既往的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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