Detailed explanation and example code of WeChat mini program modal

This article mainly introduces the detailed explanation and example code of the WeChat Mini Program modal. Friends who need it can refer to the

WeChat Mini Program modal

dialogue Pop-up window

##Property nameTypeDefault valueDescription##titlehiddenno-cancelconfirm-textcancel-textbindconfirmbindcancelExample:

String		Title
Boolean	false	Whether to hide the entire pop-up window
Boolean	false	Whether to hide the cancel button
String	Confirm	confirm button text
String	Cancel	cancel button text
EventHandle		Callback triggered by click confirmation
EventHandle		Click to cancel and the callback triggered by the mask

<modal title="标题" confirm-text="confirm" cancel-text="cancel" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
 这是对话框的内容。
</modal>

<modal class="modal" hidden="{{modalHidden2}}" no-cancel bindconfirm="modalChange2">
 <view> 没有标题没有蒙层没有确定的modal </view>
 <view> 内容可以插入节点 </view>
</modal>

<view class="btn-area">
 <button type="default" bindtap="modalTap">点击弹出modal</button>
 <button type="default" bindtap="modalTap2">点击弹出modal2</button>
</view>

Page({
 data: {
 modalHidden: true,
 modalHidden2: true
 },
 modalTap: function(e) {
 this.setData({
 modalHidden: false
 })
 },
 modalChange: function(e) {
 this.setData({
 modalHidden: true
 })
 },
 modalTap2: function(e) {
 this.setData({
 modalHidden2: false
 })
 },
 modalChange2: function(e) {
 this.setData({
 modalHidden2: true
 })
 },
})

#Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more WeChat applet modal details and example code related articles, please pay attention to the PHP Chinese website!