javaScript实现遮罩层效果：点击登录按钮，弹出登录框，此时页面的其他部分无法点击，关闭登录框，页面才可以点击

<style>
        *{
            margin:0px;
            padding:0px;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        .div1{
            text-align: center;
        }
        button{
            position: absolute;
        }
    </style>

<button>登录</button>
    <div class='div1'>
        <img src="./images/bodybg.png" alt="">
    </div>

<script>
        //获取操作对象
        var btn=document.querySelector("button")
        //给按钮绑定点击事件
        btn.onclick=function(){
            console.log(window.event)
            //创建遮藏层
            var div2=document.createElement('div')
            //给当前div2对象设置样式
            div2.style.width="100%"
            div2.style.height="100%"
            div2.style.backgroundColor="rgba(0,0,0,0.3)"
            div2.style.position="absolute"
            div2.style.top="0px"
            div2.style.left="0px"
            div2.style.zIndex=10
            //把当前新节点追加到body中
            document.body.appendChild(div2)

            //创建登录框
            var div3=document.createElement('div')
            //给div3添加内容
            div3.innerHTML="<h1 onclick='delAll()'>X</h1>"
            //给当前div3对象设置样式
           /*  div3.style="width:300px;height:200px;background-color:#fff;position:absolute;top:50%;left:50%;z-index:200;margin-top:-100px;margin-left:-150px;" */
           div3.style="width:300px;height:200px;background-color:#fff;position:absolute;top:0px;left:0px;right:0px;bottom:0px;z-index:200;margin:auto auto;"

            //把当前新节点追加到body中
            document.body.appendChild(div3)
        }
        
        //创建删除方法
        function delAll(){
            //删除指定节点
            document.body.lastElementChild.previousElementSibling.remove()
            document.body.lastElementChild.remove()
        }
    </script>