（注：图文不符，仅供参考） 

遮罩层原理

        就是当出现弹窗或者确认框的时候，点击弹窗外的地方不会触发别的响应，只是单纯地关闭弹窗（或者不关闭也不触发其他响应）

---

遮罩层的简单写法

        任意定义一个div盒子，盒子范围根据需求自定义；设置position定位属性，初始z-index为“-1”，当弹窗或者确认框显示时，提高遮罩层盒子的层级；弹窗关闭时，再将遮罩层的层级调回“-1”。遮罩层的颜色的背景颜色可以按照需求自定义。

---

参考代码

<template><div><div class="mask" ref="mask" style="z-index: -1;" @click.stop="doNothing"></div>  <!--遮罩层--><button @click="showComdirm">弹出确认框</button><div class="popup" v-if=" comfirmIsShow " @click.stop="doNothing"><h5>确认这样修改吗？</h5><div class="btn"><button @click.stop="no">取消</button><button @click.stop="yes">确定</button></div></div></div>
</template>
<script>
export default {data: function() {return {comfirmIsShow: false;  //弹窗是否展示};},created(){},methods: {showComdirm(){this.comfirmIsShow = true;this.$refs.mask.style.zIndex = 10;  //根据ref获取遮罩层盒子的style属性，修改层级},doNothing(){  //点击遮罩层区域，不做任何处理。return;},no(){   //取消操作，关闭弹窗，恢复遮罩层初始层级this.comfirmIsShow = false;this.$refs.mask.style.zIndex = -1;},yes(){/* 一些操作 */;this.comfirmIsShow = false;this.$refs.mask.style.zIndex = -1;}}
};
</script>
<style scoped>
.mask{position: absolute;top: -194px;left: 0;width: 100%;height: 710px;
}
</style>

 修改遮罩层层级的方法：（通过$refs获取）this.$refs.mask.style.zIndex = 10; 

注意：mask遮罩层的层级要写在style属性里面

---

遮罩层：遮罩层背景颜色与内层透明底图片背景颜色冲突（opacity属性踩坑）

踩坑原因：

        在设置父盒子背景颜色的时候设置了透明度opacity属性小于1，如图中的灰色用以下代码表示；子元素会继承父元素的该属性，导致透明度也<1，展示出来就不够清晰。

参考文章解释~

opacity: 0.4;
background: #000000;

解决办法：

• 父元素的颜色采用rgba的形式（在）

rgba（0，0，0，0.4）

• 找到这个透明度为0.4的黑色，用16进制表示的方法，（如果设计稿给的颜色是透明度为1的十六进制颜色，那么我们可以参照下面的透明度表，补上后面两位代表透明度） 

参考文章~

• 如上面的颜色，我们可以先知道设计稿的颜色是：#000000 ，opacity：0.4
• 透明度0.4，参照表格用十六进制表示为： 66
• 所以结合起来这个颜色就是：#00000066

 （受到父元素opacity影响的颜色）

  （修正后的显示情况）