微信小程序遮罩层显示

效果展示：

wxml页面：

<view class='modal-mask' wx:if='{{showModal}}'>
  <view class="modal-container">
    <view class='modal-content'></view>
    <view class='modal-footer' bindtap="closeImage">
        //这个/images/index/close.png的路径是关闭按钮图片，本人从阿里矢量图网站下载根据自己需求寻找，存入本地即可
      <image src="/images/index/close.png"  style="width: 80rpx; height: 80rpx;"/>
    </view>
  </view>
</view>

wxss页面：

/*遮罩层*/
.modal-mask {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

.modal-container {
  display: flex;
  flex-direction: column;
}

/*遮罩内容*/
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 450rpx;
  background-image: url(https://xxx/library/xcx_pop_img/xxx.jpg);        //图片路径，根据自己的写
  background-repeat:no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
}

.modal-footer {
  height: 80rpx;
  width: 100%;
  margin-top: 80rpx;
  text-align: center;
} 

js页面:

data: {
    showModal:true,   //弹窗显示
  },
// 关闭弹窗
  closeImage:function(e) {
    this.setData({
          showModal:false
    })
  },