小程序自定义弹框

wxml

<view class='cardNum'>
	<text catchtap='showDialogBtn'>解除绑定</text>
</view>
<!--弹窗-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
	<view class="modal-content">
		解除板顶后银行卡服务将不可使用
	</view>
	<view class="modal-footer">
		<view class="btn-cancel" bindtap="hideModal" data-status="cancel">取消</view>
		<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
	</view>
</view>

js

data: {
    showModal: false,
  },
  showDialogBtn: function () {
    var that = this
    that.setData({
      showModal: true
    })
  },
  /**
   * 隐藏模态对话框
   */
  hideModal: function () {
    var that = this
    that.setData({
      showModal: false
    });
  },

wxss

.cardNum text{
    background: white;
    float: right;
    padding: 5rpx 10rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    color:#a53533;
    margin-right: 30rpx;
    }
    
    .modal-mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.5;
      overflow: hidden;
      z-index: 9000;
      color: #fff;
    }
    .modal-dialog {
      width: 540rpx;
      overflow: hidden;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 9999;
      background: #f9f9f9;
      margin: -180rpx 105rpx;
      border-radius: 8rpx;
    } 
    .modal-content {
      padding: 50rpx 0rpx;
      text-align: center;
      color: #666
    }
    .modal-footer {
      display: flex;
      flex-direction: row;
      height: 86rpx;
      border-top: 1px solid #dedede;
      font-size: 32rpx;
      line-height: 86rpx;
    }
    .btn-cancel {
      width: 50%;
      color: #666;
      text-align: center;
      border-right: 1px solid #dedede;
    }
    .btn-confirm {
      width: 50%;
       background:#a53533;
      color: white;
      text-align: center;
    }