jquery实现遮罩层和弹出层

原创 Dale111 随笔 jquery 447阅读 2017-06-30 14:16:15 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{height: 300px;}

me{position: absolute;top: 20px;right: 30px;}

        .load {
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5;  /* 透明度 */
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 100; /* 此处的图层要大于页面 */
            /*display:none;*/
        }

        .log_window{z-index: 999;display: none;width: 300px;height: 300px;
        background: white;}
    </style>
</head>
<body>

    <div>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
        <p>这是一段文字</p>
        <input type="button" value="点击"  id="me"/>
    </div>

    <div class="load"></div>
    <div class="log_window" id="alert">
        <div>这是一个弹出层</div>
    </div>

    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script>

        $("#me").click(function(){
            $(".load").height($(window).height());
            $(".load").show();
            $(".log_window").show();
            var top = ($(window).height() - $(".log_window").height())/2;
            var left = ($(window).width() - $(".log_window").width())/2;
            var scrollTop = $(document).scrollTop();
            var scrollLeft = $(document).scrollLeft();
            $(".log_window").css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } );
            $("body").css("overflow","hidden");
        })

        $(".load").click(function(){
            $(".load").hide();
            $("body").css("overflow","auto");
            $(".log_window").hide();
        })
    </script>
</body>

</html>

评论 ( 1 )
最新评论