Taro.showModal(option)

Displays the modal dialog box.

Note

• For Android 6.7.2 and below, when you tap Cancel or Mask, the callback will fail with the errMsg of "fail cancel".
• For Android 6.7.2 & above and iOS, tapping Mask will not close the modal dialog box, so avoid using the "Cancel" branch to implement the business logic.

Reference

Type

(option: Option) => Promise<SuccessCallbackResult>

Parameters

Option

Property	Type	Required	Description
title	string	No	Prompt title
content	string	No	Prompt content
cancelColor	string	No	The text color of the "Cancel" button, which must be a color string in hexadecimal format
cancelText	string	No	The text of the "Cancel" button, not more than 4 characters
confirmColor	string	No	The text color of the "OK" button, which must be a color string in hexadecimal format
confirmText	string	No	The text of the "OK "button, not more than 4 characters
showCancel	boolean	No	Indicates whether to display the "Cancel" button
success	(result: SuccessCallbackResult) => void	No	The callback function for a successful API call
fail	(res: CallbackResult) => void	No	The callback function for a failed API call
complete	(res: CallbackResult) => void	No	The callback function used when the API call completed (always executed whether the call succeeds or fails)

SuccessCallbackResult

Property	Type	Description
cancel	boolean	When the value is "true", it indicates that the user tapped the "Cancel" button. (this is used for Android system to distinguish whether "Mask" or "Cancel" is tapped)
confirm	boolean	When the value is "true", it indicates that the user tapped the "OK" button.
errMsg	string	call result

Sample Code

Taro.showModal({
  title: 'Prompt',
  content: 'This is a modal pop-up window',
  success (res) {
    if (res.confirm) {
      console.log('"OK" is tapped')
    } else if (res.cancel) {
      console.log('"Cancel" is tapped')
    }
  }
})

API Support

API	WeChat Mini-Program	H5	React Native
Taro.showModal	✔️	✔️	✔️