How to use the modal component to pop up a dialog box in WeChat applet

This article mainly introduces the pop-up dialog box function of the WeChat applet using the modal component, and analyzes the relevant properties and event response operation skills of the model component of the WeChat applet in the form of examples. Friends in need can refer to the following

This article describes the example of the WeChat applet using the modal component to pop up the dialog box function. Share it with everyone for your reference, the details are as follows:

Key code

①, index.wxml

<view>提示：{{tip}}</view>
<button type="default" bindtap="showModal">点击我弹出modal对话框</button>
<view>
 <modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消" bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好，我是modal对话框</modal>
</view>

②, index.js

Page({
 data:{
  // text:"这是一个页面"
  tip:'',
  buttonDisabled:false,
  modalHidden:true,
  show:false
 },
 showModal:function(){
  this.setData({
   modalHidden:!this.data.modalHidden
  })
 },
 modalBindaconfirm:function(){
   this.setData({
   modalHidden:!this.data.modalHidden,
   show:!this.data.show,
   tip:'您点击了【确认】按钮！',
   buttonDisabled:!this.data.buttonDisabled
  })
 },
 modalBindcancel:function(){
   this.setData({
   modalHidden:!this.data.modalHidden,
   tip:'您点击了【取消】按钮！'
  })
 }
})

The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

Using Electron to build React Webpack desktop application (detailed tutorial)

How to achieve left and right in WeChat mini program Sliding

What are the special data types in JavaScript

How to use ajax to request server data in WeChat applet

How to use the request network to perform request operations in WeChat applet

The above is the detailed content of How to use the modal component to pop up a dialog box in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!