js实现蒙版效果全屏遮罩弹窗

路光.

已于 2023-11-25 15:57:53 修改

阅读量1.7k

点赞数

文章标签： js javascript

于 2020-07-31 16:20:06 首次发布

本文链接：https://blog.csdn.net/qq_41429765/article/details/107715986

版权

请添加图片描述

    <style>
        body html{
            width:100%;
        }
        body{
            height:3000px;
        }
        *{
            margin:0;
            padding:0;
        }
        #panel{
            width:100%;
            height:100%;
            background-color:#000;
            opacity:0.4;
            /*解决IE兼容透明度*/
            filter: alpha(opacity:40);
            position:absolute;
            left:0;
            top:0;
            display:none;
        }
        #login{
            width:300px;
            height:300px;
            background: skyblue;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: fixed;
            left:50%;
            top:50%;
            margin: -150px 0 0 -150px;
            display:none;
        }
    </style>

<body>
    <button id="btn">立即登录</button>
    <div id="panel"></div>
    <div id="login"></div>
    <script>
        window.onload=function () {
            //1.监听按钮的点击
            document.querySelector("#btn").onclick=function (e) {
                //点击登录按钮阻止冒泡
                if(e&&e.stopPropagation){
                    e.stopPropagation();
                }else{
                    window.event.cancelBubble=true;
                }
                //1.1显示面板和蒙版
                document.querySelector("#panel").style.display="block";
                document.querySelector("#login").style.display="block";
                //当出现蒙版时,去除body的滚动条
                document.body.style.overflow="hidden";

            };
            //2.点击文档
            document.onclick=function (event) {         
                var e=event||window.event;
                //2.1获取点击的标签
                var targetId=e.target?e.target.id:e.srcElement.id;
                if(targetId!=='login'){
                    document.querySelector("#panel").style.display="none";
                    document.querySelector("#login").style.display="none";
                    //当出现蒙版时,去除body的滚动条
                    document.body.style.overflow="visible";
                }
            }
        }
    </script>
</body>