微信小程序弹窗蒙版实现

有些时候我们想做一个弹窗，点弹窗外部位置要实现关闭弹窗，或者点击弹窗外部不允许触发弹窗外的组件。这个时候就需要给弹窗外部加上一层蒙版。

页面代码如下：

 <view wx:if="showMask" class="mask" >

  </view>

wxss样式代码如下：

.mask{
  position: fixed;      /* 固定定位，覆盖整个视口 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); /* 黑色半透明背景 */
  z-index: 10;          /* 确保蒙版在内容之上 */
}

showMask用控制蒙版的显示和隐藏，注意你弹窗样式z-index属性大于门板的z-index，不然你的弹窗点击会有影响