WeChat applet simulates wx.showModal package bullet box component

1. The wxml of the component

<!--index.wxml-->
<button class="show-btn" bindtap="showDialogBtn">弹窗</button>

<!--弹窗-->

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{
   
   {showModal}}"></view>

<view class="toast-dialog" wx:if="{
   
   {showModal}}">
  <view class="toast-icon" bindtap="onCancel">
    <image src="/static/del.png" mode="" />
  </view>
  <view class="toast-title">我是封装的弹框</view>
  <view class="toast-image">
    <image src="/static/dao.png" mode="" style="height: 200rpx; width: 150rpx;" />
  </view>
  <view class="toast-content">
    封装的弹框
  </view>
  <view class="toast-footer" wx:if="{
   
   {list.btnShow}}">
    <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
    <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
</view>

Second, the wxss of the component

.show-btn {
  margin-top: 100rpx;
  color: #22cc22;
}

.toast-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.toast-dialog {
  width: 540rpx;
  overflow: hidden;
  position: fixed;
  top: 30%;
  left: 0;
  z-index: 9999;
  background: #f9f9f9;
  margin: -180rpx 105rpx;
  border-radius: 16rpx;
}

.toast-icon {
  position: absolute;
  right: 32rpx;
  top: 32rpx;
}

.toast-icon image {
  width: 32rpx;
  height: 32rpx;
}

.toast-title {
  padding-top: 47rpx;
  font-size: 32rpx;
  color: #222;
  text-align: center;
}

.toast-image {
  margin-top: 35rpx;
  text-align: center;
  width: 100%;
}

.toast-content {
  font-size: 28rpx;
  text-align: center;
  margin-top: 41rpx;
  margin-bottom: 35rpx;
  color: #222;
}

.toast-text {
  font-size: 28rpx;
  text-align: center;
  margin-top: 41rpx;
  margin-bottom: 35rpx;
  color: #666;
}


.toast-footer {
  display: flex;
  flex-direction: row;
  height: 94rpx;
  border-top: 1px solid #dedede;
  line-height: 94rpx;
}

.btn-cancel {
  width: 50%;
  color: #666;
  text-align: center;
  border-right: 1px solid #dedede;
}

.btn-confirm {
  width: 50%;
  color: #01A670;
  text-align: center;
}

3. Component js

// components/toast/index.js
Component({
  /**
   * 组件的初始数据
   */

  data: {
    showModal: false,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    showDialogBtn: function () {
      this.setData({
        showModal: true
      })
    },
    /**
     * 隐藏模态对话框
     */
    hideModal: function () {
      this.setData({
        showModal: false
      });
    },

    /**
     * 对话框取消按钮点击事件
     */
    onCancel: function () {
      this.hideModal();
    },

    /**
     * 对话框确认按钮点击事件
     */
    onConfirm: function (e) {
      this.hideModal();
    }
  }
})