本日团队同事接到一个需求，需求是如许的，点击页面按钮弹出红包弹窗，表现玄色遮罩层，点击遮罩层配景和弹窗关闭按钮要关闭弹窗，于是我就做了一个Demo出来，方便以后下次自己再碰到这种需求，上代码。 html代码 页面上只有一个展示的按钮，一个ID为bg的div作为灰色配景遮罩层利用，ID为popup的div作为红包弹窗，ID为close的div作为关闭按钮。 [code] <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> [/code]CSS代码 css代码内里没什么技能难点，唯一要注意的是要给灰色配景的遮罩层一个绝对定位，top和lefe都为0就好了 [code] 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; } [/code]JS代码 [code] 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' }) [/code]到此这篇关于Html5页面点击遮罩层配景关闭遮罩层的文章就先容到这了,更多相干Html5关闭遮罩层内容请搜索脚本之家从前的文章或继续浏览下面的相干文章，希望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/754357.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:38 , Processed in 0.031863 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
