html弹出页面遮罩,html遮罩层怎么实现

　　今天，我的团队同事收到了一个请求。要求是这样的。点击页面按钮弹出红包弹出窗口，显示黑色蒙版图层。点击蒙版图层背景和弹出窗口关闭按钮关闭弹出，于是我做了一个演示，这样下次遇到这个请求就可以上传代码了。

　　Html代码

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

　　body class= BTN id= BTN show/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就不错了。

　　身体{位置：相对；} .btn {宽度：100px高度：40px行高：40px文本对齐：居中；边距：20px自动0；边框：1px纯色# 333；边框半径：10px} .bg {宽度：100%；身高：100%；位置：固定；top:0；左：0；背景色：rgba(0，0，0， 6)；显示：无；} .popup { width:260 px；高度：320px背景：红色；位置：绝对；top:50%；左：50%；transform: translate(-50%，-50%)；边框半径：15px} .弹出菜单。关闭{ width:30px；高度：30px行高：30px文本对齐：居中；位置：绝对；top:-40px；右：0px边框：1px纯色# 999；边界半径：50%；颜色：# 999；}JS代码

　　var BTN=document . getelementbyid( BTN )；var BG=document . getelementbyid( BG )；var popup=document . getelementbyid( popup )；var close BTN=document . getelementbyid( close )；//点击显示按钮显示弹出窗口btn.addeventlistener (click ，()={ BG . style . display= block )；});//点击阴影掩膜层关闭弹出窗口bg.addeventlistener (click ，(e)={ BG . style . display= none })；//停止冒泡事件，点击弹出窗口不会执行父元素的click事件popup.addeventlistener (click ，(e)={ e . Stop propagation())；});//点击关闭符号关闭弹出窗口closebtn . addevent listener( Click ，(e)={ e . stoppropagation())；Bg.style.display=none})就是这样。这篇关于在Html5页面上通过点击蒙版图层的背景来关闭蒙版图层的文章在这里介绍。关于关闭Html5上的蒙版层的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。