---
name: "showModal"
mode: "kit"
versionRequirements:
  - { name: "BaseKit", version: "2.0.1" }
  - { name: "@ray-js/ray", version: "0.3.23" }
platform:
  - "iOS"
  - "Android"
async: true
---

## showModal

> [VERSION] BaseKit >= 2.0.1 | @ray-js/ray >= 0.3.23

> [PLATFORM] iOS, Android

> ⚡ **Supports Promise** — Returns a Promise when success / fail / complete callbacks are omitted.

### Description

Show a modal dialog

### Parameters

| Property | Type | Required | Default | Since | Description |
| --- | --- | --- | --- | --- | --- |
| `title` | `string` | Yes | - | `2.0.1` | Title |
| `content` | `string` | No | - | `2.0.1` | Content |
| `showCancel` | `boolean` | No | `true` | `2.0.1` | Whether to show a cancel button |
| `cancelText` | `string` | No | `"cancel"` | `2.0.1` | Text of the cancel button, up to 4 characters |
| `cancelColor` | `string` | No | - | `2.0.1` | Cancel button text color, must be a hexadecimal color string |
| `confirmText` | `string` | No | `"confirm"` | `2.0.1` | Text of the confirm button, up to 4 characters |
| `confirmColor` | `string` | No | - | `2.0.1` | Confirm button text color, must be a hexadecimal color string |
| `isShowGlobal` | `boolean` | No | `false` | `3.14.3` | Whether it's a global dialog; if so, it appears on top |
| `modalStyle` | `0 \| 1` | No | `0` | `3.21.2` | Dialog style |
| `inputAttr` | `InputBean` | No | - | `3.21.2` | Dialog input field properties |
| `complete` | `() => void` | No | - | - | Completion callback (executed on both success and failure) |
| `success` | `(params: Object) => void` ↓see below | No | - | - | Callback on successful API call |
| `fail` | `(params: Object) => void` ↓see below | No | - | - | Failure callback |

#### success callback parameters

| Property | Type | Since | Description |
| --- | --- | --- | --- |
| `confirm` | `boolean` | `3.2.6` | true indicates the user tapped the confirm button |
| `cancel` | `boolean` | `3.2.6` | true indicates the user tapped Cancel (used on Android to distinguish mask tap from cancel button) |
| `inputContent` | `string` | `3.21.2` | Input value |

#### fail callback parameters

| Property | Type | Description |
| --- | --- | --- |
| `errorMsg` | `string` | Error message |
| `errorCode` | `string \| number` | Error code |
| `innerError` | `Object` | Error extension |

##### fail(params).innerError properties

| Property | Type | Description |
| --- | --- | --- |
| `errorCode` | `string \| number` | Error extension code |
| `errorMsg` | `string` | Error extension message |


### Referenced Types

##### `interface` InputBean

| Property | Type | Since | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | `3.21.2` | Input placeholder |
| `placeHolderColor` | `string` | `3.21.2` | Input placeholder color |
| `backgroundColor` | `string` | `3.21.2` | Input background color, default is white |
| `textColor` | `string` | `3.21.2` | Input text color |


### Valid Values

##### `modalStyle` valid values

| Value | Description |
| --- | --- |
| `0` | Default style |
| `1` | Input style |


### Examples

#### Demo

```tsx
import { showModal } from '@ray-js/ray'

// Show a modal dialog; the callback returns whether the user tapped confirm or cancel
showModal({
  title: "Prompt",
  content: "Are you sure you want to proceed?",
  showCancel: true,
  cancelText: "Cancel",
  confirmText: "Confirm",
  success: data => console.log("confirm:", data.confirm, "cancel:", data.cancel),
  fail: error => console.error(error),
});
```