微信小程序自定义模态框

wxml

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modalDlg" wx:if="{{showModal}}">
    <image src="/images/model@2x.png"/>
    <text class='modalDlg-txt'>请确定已收到货物？</text>
    <view class='btn'>
    <view class='cancel' bindtap='cancenlClick'>取消</view>
    <view class='confirm' bindtap='confirmClick'>确认</view>
    </view>
</view>
<button bindtap="submit">点我弹窗</button>

wxss

.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: gray;
    opacity: 0.8;
    z-index: 9000;
    opacity: 0.7;
}
 
.modalDlg{
    width: 540rpx;
    height: 440rpx;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    margin: -370rpx 85rpx;
    background-color: #fff;
    border-radius: 36rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.modalDlg-txt {
  font-size: 30rpx;
  color: #333333;
  position: absolute;
  top: 223rpx;

}
.modalDlg image {
    width: 540rpx;
    height: 357rpx;
}
.btn {
  display: flex;
  font-size: 30rpx;
  width: 100%;
  margin-bottom: 20rpx
}
.cancel {
  color: #BBBBBB;
  flex: 1;
  text-align: center;
}
.confirm {
  color: #6FADFF;
  flex: 1;
  text-align: center;

}

js

Page({

  data: {
    showModal: false
  },

  submit: function () {
    this.setData({
      showModal: true
    })
  },
  preventTouchMove: function () {
      this.setData({
        showModal: false
      })
  },
  cancenlClick:function() {
      this.setData({
        showModal:false
      })
  },
  confirmClick:function() {
    console.log('确认收货了')
        this.setData({
          showModal: false
        })
  },
  go: function () {
    this.setData({
      showModal: false
    })
  }

})