jquery 弹出浮层(div) + 遮蔽层

最新推荐文章于 2021-03-22 12:35:57 发布

aiyinzhi8916

最新推荐文章于 2021-03-22 12:35:57 发布

阅读量258

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Dot-Boy/archive/2009/07/06/1517747.html

版权

<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 οnclick="hideDiv('pop-div');" value="关闭"/>
            </div>
        </div>
    <input type=button id=btnTest value='test' οnclick="popupDiv('pop-div');"/>
    </form>

</body>
</html>

转载于:https://www.cnblogs.com/Dot-Boy/archive/2009/07/06/1517747.html

aiyinzhi8916

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 弹出浮层(div) + 遮蔽层

<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&...
复制链接

扫一扫