在Html5中如何实现页面点击遮罩层背景和关闭遮罩层效果

这篇文章主要介绍在Html5中如何实现页面点击遮罩层背景和关闭遮罩层效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

html代码：

页面上只有一个展示的按钮，一个ID为bg的div作为灰色背景遮罩层使用，ID为popup的div作为红包弹窗，ID为close的div作为关闭按钮。

    
展示
    
        
            
X
        
    

CSS代码

css代码里面没什么技术难点，唯一要注意的是要给灰色背景的遮罩层一个绝对定位，top和lefe都为0就好了

    body {        position: relative;    }    .btn {        width: 100px;        height: 40px;        line-height: 40px;        text-align: center;        margin:20px auto 0;        border: 1px solid #333;        border-radius: 10px;    }    .bg {        width: 100%;        height: 100%;        position: fixed;        top: 0;        left: 0;        background-color: rgba(0, 0, 0, .6);        display: none;    }    .popup {        width: 260px;        height: 320px;        background: red;        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        border-radius: 15px;     }    .popup .close {        width: 30px;        height: 30px;        line-height: 30px;        text-align: center;        position: absolute;        top: -40px;        right: 0px;        border: 1px solid #999;        border-radius: 50%;        color: #999;    }

JS代码：

    var btn = document.getElementById('btn');    var bg = document.getElementById('bg');    var popup = document.getElementById('popup');    var closeBtn = document.getElementById('close');    // 点击展示按钮显示弹窗    btn.addEventListener('click', ()=> {        bg.style.display = 'block';    });    // 点击阴影遮罩层关闭弹窗    bg.addEventListener('click', (e)=> {        bg.style.display = 'none'    });    // 阻止冒泡事件，点击弹窗不会执行父元素的点击事件    popup.addEventListener('click', (e)=> {        e.stopPropagation();    });    // 点击关闭符号关闭弹窗    closeBtn.addEventListener('click', (e)=> {        e.stopPropagation();        bg.style.display = 'none'    })

以上是"在Html5中如何实现页面点击遮罩层背景和关闭遮罩层效果"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！