Html5页面点击遮罩层背景关闭遮罩层遮罩层 + Iframe实现界面自动显示的示例代码HTML实现遮罩层的方法 HTML中如何使用遮罩层弹出一个遮罩层有正在加载效果的文字DIV遮罩层如何实现div背景半透明，覆盖整个可视区域的遮罩层效果 div背景半透明 覆盖整个可视区域的遮罩层效果

展示
X

 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; } 

 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' })