JqUery让DIV浮动效果背景被遮盖

最新推荐文章于 2022-08-29 10:44:03 发布

xianyao_shi

最新推荐文章于 2022-08-29 10:44:03 发布

阅读量3.6k

点赞数

文章标签： div jquery function button javascript input

本文链接：https://blog.csdn.net/xianyao_shi/article/details/6064865

版权

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>test</title>
    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></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>

xianyao_shi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JqUery让DIV浮动效果背景被遮盖

<br /><html xmlns="http://www.w3.org/1999/xhtml" ><br /><head id="Head1" runat="server"><br /> <title>test</title><br /> <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script><br /> <style type="text/css"><br /> .pop
复制链接

扫一扫