jquery打开新的窗口

浏览数：20 / 时间：2015年06月09日

使用本代码可以实现打开一个新的窗口，窗口的位置可变

<!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>jQuery弹出窗口</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" src="../jquery-1.4.4.min.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>
<div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
    <input type="button" value="居中窗口" id="btn_center" />
    <input type="button" value="居左下角" id="btn_left" />
    <input type="button" value="居右下角" id="btn_right" />
</div>
<div class="window" id="center">
    <div id="title" class="title"><img src="a.jpg" alt="关闭" />居中窗口</div>
    <div class="content">居中窗口</div>
</div>

<div class="window" id="left">
    <div id="title2" class="title"><img src="a.jpg" alt="关闭" />居左窗口</div>
    <div class="content">居左窗口</div>
</div>
<div class="window" id="right">
    <div id="title3" class="title"><img src="a.jpg" alt="关闭" />居右窗口</div>
    <div class="content">居右窗口</div>
</div>
<script type="text/javascript">
    //获取窗口的高度
    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(‘jihua.cnblogs.com‘);
        //设定窗口的位置
        $("#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-50).css("left",50).slideToggle("slow");
        closeWindow();
    }
    function popRightWindow(){
        init();
        //计算弹出窗口的左上角Y的偏移量 
        var popY=windowHeight-popHeight;
        var popX=windowWidth-popWidth;
        //alert(www.cnblogs.com/jihua);
        //设定窗口的位置
        $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow");
        closeWindow();
    } </script>
</body>
</html>

上述代码所使用的图片我上传至百度盘，地址为： http://pan.baidu.com/s/1hqhDs9I ，上述代码使用的jquery.min文件自己可以去百度搜索一下，下载一个即可使用。

页面效果如下：

技术分享