title: Taro.showModal(option)

sidebar_label: showModal

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

  1. (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

  1. Taro.showModal({
  2.   title: 'Prompt',
  3.   content: 'This is a modal pop-up window',
  4.   success (res) {
  5.     if (res.confirm) {
  6.       console.log('"OK" is tapped')
  7.     } else if (res.cancel) {
  8.       console.log('"Cancel" is tapped')
  9.     }
  10.   }
  11. })

API Support

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