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">居左窗口：欢迎你！<img src="images/close.jpg"/></div>

    <div class="content">李伟老师讲课呢！</div>

    </div>

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

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

    <div class="content">李伟老师讲课呢！</div>

    </div>

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

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

    <div class="content">李伟老师讲课呢！</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>