---
name: "showModal"
mode: "kit"
versionRequirements:
  - { name: "BaseKit", version: "2.0.1" }
  - { name: "@ray-js/ray", version: "0.3.23" }
platform:
  - "iOS"
  - "Android"
async: true
title: "showModal - 显示模态对话框"
---

## showModal

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

> [PLATFORM] iOS, Android

> ⚡ **支持 Promise 调用** — 不传 success / fail / complete 回调时，该方法返回 Promise。

### 描述

显示模态对话框

### 参数

| 属性 | 类型 | 必填 | 默认值 | 最低版本 | 描述 |
| --- | --- | --- | --- | --- | --- |
| `title` | `string` | 是 | - | `2.0.1` | 提示的标题 |
| `content` | `string` | 否 | - | `2.0.1` | 提示的内容 |
| `showCancel` | `boolean` | 否 | `true` | `2.0.1` | 是否显示取消按钮 |
| `cancelText` | `string` | 否 | `"cancel"` | `2.0.1` | 取消按钮的文字，最多 4 个字符 |
| `cancelColor` | `string` | 否 | - | `2.0.1` | 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串 |
| `confirmText` | `string` | 否 | `"confirm"` | `2.0.1` | 确认按钮的文字，最多 4 个字符 |
| `confirmColor` | `string` | 否 | - | `2.0.1` | 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串 |
| `isShowGlobal` | `boolean` | 否 | `false` | `3.14.3` | 是否全局弹窗，若为全局弹窗，弹在最顶上 |
| `modalStyle` | `0 \| 1` | 否 | `0` | `3.21.2` | 弹窗样式 |
| `inputAttr` | `InputBean` | 否 | - | `3.21.2` | 弹窗输入框属性 |
| `complete` | `() => void` | 否 | - | - | 接口调用结束的回调函数（调用成功、失败都会执行） |
| `success` | `(params: Object) => void` ↓见下方 | 否 | - | - | 接口调用成功的回调函数 |
| `fail` | `(params: Object) => void` ↓见下方 | 否 | - | - | 接口调用失败的回调函数 |

#### success 回调参数

| 属性 | 类型 | 最低版本 | 描述 |
| --- | --- | --- | --- |
| `confirm` | `boolean` | `3.2.6` | 为 true 时，表示用户点击了确定按钮 |
| `cancel` | `boolean` | `3.2.6` | 为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭） |
| `inputContent` | `string` | `3.21.2` | 输入框的内容 |

#### fail 回调参数

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `errorMsg` | `string` | 错误信息 |
| `errorCode` | `string \| number` | 错误码 |
| `innerError` | `Object` | 错误扩展 |

##### fail(params).innerError 的属性

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `errorCode` | `string \| number` | 错误扩展码 |
| `errorMsg` | `string` | 错误扩展信息 |


### 引用对象

##### `interface` InputBean

| 属性 | 类型 | 最低版本 | 描述 |
| --- | --- | --- | --- |
| `placeholder` | `string` | `3.21.2` | 输入框占位内容 |
| `placeHolderColor` | `string` | `3.21.2` | 输入框占位内容颜色 |
| `backgroundColor` | `string` | `3.21.2` | 输入框背景颜色，默认白色 |
| `textColor` | `string` | `3.21.2` | 输入框字体颜色 |


### 合法值

##### `modalStyle` 合法值

| 值 | 说明 |
| --- | --- |
| `0` | 默认样式 |
| `1` | Input 样式 |


### 示例代码

#### Demo

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

// 显示模态对话框，回调返回用户点击的是确定还是取消
showModal({
  title: "提示",
  content: "确定执行此操作吗？",
  showCancel: true,
  cancelText: "取消",
  confirmText: "确定",
  success: data => console.log("confirm:", data.confirm, "cancel:", data.cancel),
  fail: error => console.error(error),
});
```