Add the following code for index.wxml: (wechat applet - the highest level of canvas, how to go beyond the level of canvas, only the cover view tag can be used)

<!--index.wxml-->

<button class="show-btn" bindtap="showDialogBtn">Popup</button>

<!--Popup-->

<cover-view class="modal-mask" bindtap="hideModal"  wx:if="{{modal.isShow}}"></cover-view>
<cover-view class="modal-dialog" wx:if="{{modal.isShow}}" >
    <cover-view class="modal-title">{{modal.title}}</cover-view>
    <cover-view class="modal-content">
        <cover-image src="{{modal.src}}" class="img-full" style="height:auto;" mode="widthFix"></cover-image>
    </cover-view>
    <cover-view class="modal-footer" wx-if="{{modal.isFooter}}">
        <cover-view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{modal.cancel}}</cover-view>
        <cover-viewew class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{modal.ok}}</cover-viewew>
        </cover-view>
</cover-view>

Modify the style file index.wxss, and the style code is as shown in the following figure:

/index.wxss/

.show-btn {

  margin-top: 100rpx;

  color: #22cc22;

}

.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: 36rpx;

}

.modal-title {

  padding-top: 50rpx;

  font-size: 36rpx;

  color: #030303;

  text-align: center;

}

.modal-content {

  padding: 50rpx 32rpx;

}

.modal-input {

  display: flex;

  background: #fff;

  border: 2rpx solid #ddd;

  border-radius: 4rpx;

  font-size: 28rpx;

}

.input {

  width: 100%;

  height: 82rpx;

  font-size: 28rpx;

  line-height: 28rpx;

  padding: 0 20rpx;

  box-sizing: border-box;

  color: #333;

}

input-holder {

  color: #666;

  font-size: 28rpx;

}

.modal-footer {

  display: flex;

  flex-direction: row;

  height: 86rpx;

  border-top: 1px solid #dedede;

  font-size: 34rpx;

  line-height: 86rpx;

}

.btn-cancel {

  width: 50%;

  color: #666;

  text-align: center;

  border-right: 1px solid #dedede;

}

.btn-confirm {

  width: 50%;

  color: #ec5300;

  text-align: center;

}

The index.js code is shown in the following figure:

//index.js

//Get application instance

var app = getApp()

Page({

  data: {

    showModal: false,

  },

  onLoad: function () {

  },

  /**

   * Popup

   */

  showDialogBtn: function () {

    this.setData({

      showModal: true

    })

  },

  /**

   * Popup mask truncation touchmove event

   */

  preventTouchMove: function () {

  },

  /**

   * Hide modal dialog

   */

  hideModal: function () {

    this.setData({

      showModal: false

    });

  },

  /**

   * Dialog cancel button click event

   */

  onCancel: function () {

    this.hideModal();

  },

  /**

   * Dialog confirm button click event

   */

  onConfirm: function () {

    this.hideModal();

  }

})

Run. You can see the effect of wx.showModal after modifying the style

Here's a special thing to pay attention to, which is the following method:

preventTouchMove: function () {    }

Why an empty method? Because in combination with the interface wxml, there is an event binding in the mask view

catchtouchmove="preventTouchMove". 

The reason for this maintenance is to block the downward transmission of events and avoid clicking or sliding the interface under the mask after the pop-up window.

If not, if the main interface is a scrollable interface, think about it. When the pop-up window pops up, the user can also operate the scrolling list.