Skip to main content
Version: Next

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

PropertyTypeRequiredDescription
titlestringNoPrompt title
contentstringNoPrompt content
cancelColorstringNoThe text color of the "Cancel" button, which must be a color string in hexadecimal format
cancelTextstringNoThe text of the "Cancel" button, not more than 4 characters
confirmColorstringNoThe text color of the "OK" button, which must be a color string in hexadecimal format
confirmTextstringNoThe text of the "OK "button, not more than 4 characters
showCancelbooleanNoIndicates whether to display the "Cancel" button
success(result: SuccessCallbackResult) => voidNoThe callback function for a successful API call
fail(res: CallbackResult) => voidNoThe callback function for a failed API call
complete(res: CallbackResult) => voidNoThe callback function used when the API call completed (always executed whether the call succeeds or fails)

SuccessCallbackResult

PropertyTypeDescription
cancelbooleanWhen 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)
confirmbooleanWhen the value is "true", it indicates that the user tapped the "OK" button.
errMsgstringcall 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

APIWeChat Mini-ProgramH5React Native
Taro.showModal✔️✔️✔️