jquery 弹出浮层(div) + 遮蔽层方法一

来源：互联网发布：linux调整系统时区编辑：程序博客网时间：2024/04/29 01:03

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>test</title>
    <script type="text/javascript" src="jquery/jquery-1.2.6.js" ></script>
    <style type="text/css">
        .pop-box {
            z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
            margin-bottom: 3px;
            display: none;
            position: absolute;
            background: #FFF;
            border:solid 1px #6e8bde;
        }

        .pop-box h4 {
            color: #FFF;
            cursor:default;
            height: 18px;
            font-size: 14px;
            font-weight:bold;
            text-align: left;
            padding-left: 8px;
            padding-top: 4px;
            padding-bottom: 2px;
            background: url("../images/header_bg.gif") repeat-x 0 0;
        }

        .pop-box-body {
            clear: both;
            margin: 4px;
            padding: 2px;
        }


        .mask {
            color:#C7EDCC;
            background-color:#C7EDCC;
            position:absolute;
            top:0px;
            left:0px;
            filter: Alpha(Opacity=60);
        }
    </style>
   <script language=javascript type="text/javascript">
    function popupDiv(div_id) {
        var div_obj = $("#"+div_id);
        var windowWidth = document.body.clientWidth;
        var windowHeight = document.body.clientHeight;
        var popupHeight = div_obj.height();
        var popupWidth = div_obj.width();
        //添加并显示遮罩层
        $("<div id='mask'></div>").addClass("mask")
                                  .width(windowWidth + document.body.scrollWidth)
                                  .height(windowHeight + document.body.scrollHeight)
                                  .click(function() {hideDiv(div_id); })
                                  .appendTo("body")
                                  .fadeIn(200);
        div_obj.css({"position": "absolute"})
               .animate({left: windowWidth/2-popupWidth/2,
                         top: windowHeight/2-popupHeight/2, opacity: "show" }, "slow");

    }

    function hideDiv(div_id) {
        $("#mask").remove();
        $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");
    }
   </script>

</head>
<body>
    <form id="form1" runat="server">
        <div id='pop-div' style="width: 300px;" class="pop-box">
            <h4>标题位置</h4>
            <div class="pop-box-body" >
                <p>
                    正文内容
                </p>
                <input id=btnClose type=button onclick="hideDiv('pop-div');" value="关闭"/>
            </div>
        </div>
    <input type=button id=btnTest value='test' onclick="popupDiv('pop-div');"/>
    </form>

</body>
</html>

0 0

jquery 弹出浮层(div) + 遮蔽层 方法一

jquery 弹出浮层(div) + 遮蔽层方法一