您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍在Html5中如何实现页面点击遮罩层背景和关闭遮罩层效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
html代码：
页面上只有一个展示的按钮，一个ID为bg的div作为灰色背景遮罩层使用，ID为popup的div作为红包弹窗，ID为close的div作为关闭按钮。
<body>
<div class="btn" id="btn">展示</div>
<div class="bg" id="bg">
<div class="popup" id="popup">
<div class="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: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中如何实现页面点击遮罩层背景和关闭遮罩层效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。