自定义弹窗

布局

<!--弹窗-->
    <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
    <view class="modal-dialog" wx:if="{{showModal}}">
      <view class="modal-title">如何退押金？</view>
      <view class="modal-content">
          <view class="modal-text">大白在家小程序尚未支持押金退回、您可以使用大白在家APP进行操作。
      </view>
    </view>
        <view class="modal-footer">
          <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">我知道了</view>
        </view>
    </view>

js代码

    toRefund: function () {
        this.setData({
          showModal: true
        })
    },
    /**
    * 弹出框蒙层截断touchmove事件
    */
    preventTouchMove: function () {
    },
    /**
    * 隐藏模态对话框
    */
    hideModal: function () {
        this.setData({
          showModal: false
        });
    },
    /**
    * 对话框取消按钮点击事件
    */
    onCancel: function () {
        this.hideModal();
    },
    /**
    * 对话框确认按钮点击事件
    */
    onConfirm: function () {
        this.hideModal();
    }

样式

    .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 {
      overflow: hidden;
      position: fixed;
      top: 50%;
      left: 0;
      z-index: 9999;
      background: #f9f9f9;
      margin: -180rpx 80rpx;
      border-radius: 16rpx;
    }
    
    .modal-title {
      padding-top: 50rpx;
      font-size: 30rpx;
      color: rgb(6, 6, 6);
      margin: 0rpx 0 0rpx 36rpx;
    }
    
    .modal-content {
      padding: 50rpx 0rpx 50rpx 36rpx;
    }
    
    .modal-text {
      display: flex;
      font-size: 34rpx;
      color: rgb(6, 6, 6);
    }
    
    .modal-footer {
      display: flex;
      flex-direction: row;
      padding: 0 60rpx 50rpx;
      font-size: 34rpx;
      float: right;
    }
    
    .btn-confirm {
      color: rgb(26, 215, 177);
      right: 10rpx;
    }