当前位置：首页 > 软件开发 > Web开发 > JavaScript

jquery实现弹出窗口效果

来源：岁月联盟编辑：exp 时间：2012-03-28

用jquery实现图片任意点击，到任意地方去，很好用也很好看的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口效果</title>
<style type="text/css">
.window{
    width:250px;
    background-color:#d0def0;
    position:absolute;
    padding:2px;
    margin:5px;
    display:none;
    }
.content{
    height:150px;
    background-color:#FFF;
    font-size:14px;
    overflow:auto;
    }
    .title{
        padding:2px;
        color:#0CF;
        font-size:14px;
        }
.title img{
        float:right;
        }
</style>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js">
</script>
<script type="text/javascript" language="javascript" src="window.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    $("#btn_center").click(function(){
        popCenterWindow();
        });

    $("#btn_right").click(function(){
        popRightWindow();
        });
        $("#btn_left").click(function(){
        popLeftWindow();
        });

    });

</script>
</head>
<body>
<input type="button" value="居中窗口" id="btn_center">
<input type="button" value="居左下角" id="btn_left">
<input type="button" value="居右下角" id="btn_right">
   <div class="window" id="center">
<div id="title" class="title"><img src="../../images/close.jpg" />csdn欢迎您-居中窗口</div>
<div class="content">爱的供养呼吸的痛</div>
   </div>

<div class="window" id="left">
<div id="title" class="title"><img src="../../images/close.jpg" />csdn欢迎您-居左窗口</div>
<div class="content">爱的供养呼吸的痛</div>
</div>
<div class="window" id="right">
<div id="title" class="title"><img src="../../images/close.jpg" />csdn欢迎您-居右窗口</div>
<div class="content">爱的供养呼吸的痛</div>
</div>
</body>
</html>

[html]
//获取窗口的高度
var windowHeight;
//获取窗口的宽度
var windowWidth;
//获取弹窗的宽度
var popWidth;
//获取弹窗高度
var popHeight;
function init(){
   windowHeight=$(window).height();
   windowWidth=$(window).width();
   popHeight=$(".window").height();
   popWidth=$(".window").width();
}
//关闭窗口的方法
function closeWindow(){
    $(".title img").click(function(){
        $(this).parent().parent().hide("slow");
        });
    }
    //定义弹出居中窗口的方法
    function popCenterWindow(){
        init();
        //计算弹出窗口的左上角Y的偏移量
    var popY=(windowHeight-popHeight)/2;
    var popX=(windowWidth-popWidth)/2;
    //alert(popY);
    //设定窗口的位置
    $("#center").css("top",popY).css("left",popX).slideToggle("slow");
    closeWindow();
    }
    function popLeftWindow(){
        init();
        //计算弹出窗口的左上角Y的偏移量
    var popY=windowHeight-popHeight;
    //var popX=-(windowWidth-popWidth);
    //alert(popY);
    //设定窗口的位置
    $("#left").css("top",popY).css("left",0).slideToggle("slow");
    closeWindow();
    }
    function popRightWindow(){
        init();
        //计算弹出窗口的左上角Y的偏移量
    var popY=windowHeight-popHeight;
    var popX=windowWidth-popWidth;
    //alert(popY);
    //设定窗口的位置
    $("#right").css("top",popY).css("left",popX).slideToggle("slow");
    closeWindow();
    }