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

html代码：

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

<body><divclass="btn"id="btn">展示</div><divclass="bg"id="bg"><divclass="popup"id="popup"><divclass="close"id="close">X</div></div></div></body>

CSS代码

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

body{position:relative;}.btn{width:100px;height:40px;line-height:40px;text-align:center;margin:20pxauto0;border:1pxsolid#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:1pxsolid#999;border-radius:50%;color:#999;}

JS代码：

varbtn=document.getElementById('btn');varbg=document.getElementById('bg');varpopup=document.getElementById('popup');varcloseBtn=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中如何实现页面点击遮罩层背景和关闭遮罩层效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！