# Modal 对话框

对话框是一种临时窗口，通常在不想中断整体任务流程，但又需要为用户展示信息或获得用户响应时，在页面中打开一个对话框承载相应的信息及操作。

## 使用示例

<!-- <Half> -->

### 基本用法

[Example: 对话框](./_example/ModalBasicExample.jsx)

### 尺寸设置

对话框支持配置尺寸：

[Example: 尺寸](./_example/ModalSizeExample.jsx)

### 禁用 ESC 关闭

默认情况下，对话框会在按 ESC 的时候关闭，如果要阻止该行为，请传入 `disableEscape`：

[Example: DisableESC](./_example/ModalEscExample.jsx)

### 点击遮罩关闭

使用 `maskClosable` 启用点击遮罩关闭：

[Example: MaskClosable](./_example/ModalMaskClosableExample.jsx)

### 内置方法

Tea 2.0 也提供了一些方便的内置对话框供业务使用：

[Example: Scene](./_example/ModalSceneExample.jsx)

### API 唤起（不推荐）

对于部分极端场景，没有可用于渲染对话框的文档流的情况下，可以采取 API 打开对话框。**但是这个功能开发者应该慎用，因为使用 API 打开对话框，实际上会断掉数据流，并不是一个好的实践。**

[Example: API 唤起](./_exmaple/../_example/ModalShowExample.jsx)

### Modal.Message

对话框中信息展示样式组件：

[Example: 对话框](./_example/ModalMessageExample.jsx)

<!-- </Half> -->

## API

`Modal.alert(options)`

API 的方式唤起一个对话框显示提醒信息

`Modal.success(options)`

API 的方式唤起一个对话框显示成功信息

`Modal.error(options)`

API 的方式唤起一个对话框显示失败信息

`Modal.confirm(options)`

API 的方式唤起一个确认对话框，该方法异步返回布尔值，为 `true` 则表示用户确认，为 `false` 则表示用户取消

`Modal.show(options)`

API 的方式唤起一个通用对话框，返回值中 `{ destroy }` 可关闭对话框

---

`Modal.config(options)`

全局配置（2.5.0 版本支持）

## 内容组件

`<Modal.Body>`

渲染对话框的主要内容的组件

`<Modal.Footer>`

渲染对话框的底部内容的组件

`<Modal.Message>`

对话框消息内容，可置于 <Modal.Body> 中


## 组件属性

[Interface: ModalProps](./ModalMain.tsx)

[Interface: ModalStaticAPI](./Modal.tsx)

[Interface: ModelConfigOptions](./ModalMain.tsx)

[Interface: ModalMessageProps](./ModalMessage.tsx)

全局配置

<!--
## 从 Tea v1 升级

- 之前的 `Dialog` 组件更名为 `Modal`
- `Dialog` 渲染即出现，`Modal` 则需要传入 `visible` 属性来决定出现时机 -->