Detailed explanation of examples of custom modal dialog boxes in WeChat mini programs

This article mainly introduces the relevant information of WeChat applet custom modal dialog instances in detail, which has certain reference value. Interested friends can refer to it

Because of the official API The provided display modal pop-up window can only simply display text content and cannot customize the content of the dialog box. It lacks flexibility, so I implemented a custom modal dialog box based on the principle of modal pop-up windows.

wx.showModal(OBJECT)
Customization
Modal dialog box

Involving files

Interfacewxml
Stylewxcss
Events and methods js

Rendering

Interface code.wxml

##

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

<!--弹窗-->
<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-input">
  <input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="请输入数量"></input>
 </view>
 </view>
 <view class="modal-footer">
 <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
 <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view>
 </view>
</view>

Style.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;
}

Events and methods.js

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

Interpretation of implementation ideas and principles

Interface interpretation:

It is composed of a mask layer + pop-up window, and uses the bound data {{showModal}} to control the display and hiding of the pop-up window

Interpretation of events and methods:

How to make the pop-up window display:

showDialogBtn: function() {
  this.setData({
  showModal: true
  })
 }

How to make the pop-up window disappear:

hideModal: function () {
  this.setData({
  showModal: false
  });
 }

Here is one What needs special attention is the following method:

preventTouchMove: function () {
 }

Why is it an empty method? Because it needs to be viewed in conjunction with the interface wxml, there is an event binding in the masked view catchtouchmove="preventTouchMove". The reason for writing this is to block the downward transmission of events and avoid being able to click or slide the interface under the mask after the pop-up window. If you don't write it like this, if the main interface is a scrollable interface, think about it, the user can also operate the scrolling list when the pop-up window pops up, I think your product manager will come to you.

3. Style Interpretation: (This title does not have a code block identifier, but it is still displayed like a code block. This is a bug!!! - -)

.modal The writing of -mask and .modal-dialog styles requires special attention.

The main thing is the hierarchical relationship. The pop-up window must be on the top layer and not blocked by the interface. Then the masking layer must block the interface, but the pop-up window cannot be blocked. Therefore, the z-index values ​​of .modal-mask and .modal-dialog should be paid attention to.

The above is the detailed content of Detailed explanation of examples of custom modal dialog boxes in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!