现在大部分的网站，在我们点开一些活动页面是都会弹出一个类似领取红包，奖品等活动信息。也就是一个遮罩层，而实际上这遮罩层就是由简单的css来实现的。在这里为了演示遮罩层的效果会添加简单的js，模拟页面中弹出红包的遮罩效果。
工具/原料
1
电脑
2
网页编辑器
css遮罩层的实现
1
第一步：新建一个html页面页面中先做出一个【领红包】的按钮，如图（图中左侧是效果右侧是代码），点击这个按钮就会弹出一个红包的活动消息，即我们要的遮罩效果
2
第二步：做出遮罩层遮罩层的作用就是将层后面的内容都遮住，覆盖全屏，所以：宽高都设为：100%；位置 position：absolute；left：0； top:0;背景色 一般都设为透明的 background: rgba(0,0,0,0.5);层的顺序 z-index:100; (设置一个比较大的数值)
3
第三步：做出遮罩层上的内容1、在遮罩层上添加活动效果图2、关闭活动信息弹出框的【关闭】按钮注意:遮罩层上的内容也要添加上z-index且数值要比遮罩层的大，z-index:101如图（左侧效果，右侧代码）
4
第四步：用js实现遮罩效果演示首先我们看到的页面上是没有遮罩层的，只有一个【领红包】的按钮在页面中；然后我们点就【领红包】按钮，就弹出遮罩效果；再要关闭遮罩层时点击右上角的关闭按钮，就退出了遮罩成的活动信息。具体操作如下：1、将遮罩层隐藏起来 display：none；2、点击【领红包】时，遮罩层显示 display：block;3、点击关闭按钮，遮罩层消失 display：none；如图
注意事项
1
注意:遮罩层上的内容也要添加上z-index且数值要比遮罩层的大
2
希望小编分享的原创经验对好伙伴们有所帮助，如果小伙伴们有对本经验有任何疑问，请在下方评论处留言讨论，小编第一时间来解答
上一篇：凉拌毛豆独家的简单的家常做法
下一篇：PHP教程 查找数组最大值