弹出层实现 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width: 500px;
            height: 500px;
            background-color: blue;
            position: fixed;
            top:50%;
            left:50%;
            margin-left:-250px;
            margin-top:-250px;
            display: none;
        }
    </style>
</head>
<body>
    <button data-btn="success" id="btn">弹出</button>
    <div id="box"></div>
    <script>
        var $bodyHeight = document.documentElement.clientHeight+'px';
        var $body = document.getElementsByTagName('body')[0];
        var $btn = document.getElementById('btn');
        var $box = document.getElementById('box');
        $body.style.height = $bodyHeight;
        //弹出按钮点击  阻止冒泡
        $btn.onclick=function(e){
            $box.style.display="block"
            $body.style.backgroundColor = "#eee";
             e.stopPropagation()
        }
        //body点击
       $body.onclick=function(e){
            $body.style.backgroundColor = "white";
            $box.style.display="none"
        }
        //box点击
        $box.onclick=function(e){
            e.stopPropagation()
        }
    </script>
</body>
</html>

 

posted on 2017-08-16 01:07  -韩帅  阅读(120)  评论(0)    收藏  举报

导航