ant-design/components/modal/index.zh-CN.md

---
type: Feedback
category: Components
subtitle: 对话框
title: Modal
---

模态对话框。

## 何时使用

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。

另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。

## API

| 参数       | 说明           | 类型             | 默认值       |
|------------|----------------|------------------|--------------|
| visible    | 对话框是否可见 | boolean          | 无           |
| confirmLoading | 确定按钮 loading | boolean    | 无           |
| title      | 标题           | string\|ReactNode | 无           |
| closable   | 是否显示右上角的关闭按钮 | boolean    | true        |
| onOk       | 点击确定回调       | function     | 无           |
| onCancel   | 点击遮罩层或右上角叉或取消按钮的回调  | function(e)  | 无         |
| width      | 宽度           | string\|number | 520           |
| footer     | 底部内容       | string\|ReactNode | 确定取消按钮 |
| okText     | 确认按钮文字    | string           | 确定       |
| cancelText | 取消按钮文字    | string           | 取消       |
| maskClosable | 点击蒙层是否允许关闭 | boolean   | true       |
| style | 可用于设置浮层的样式，调整浮层位置等 | object   | - |
| wrapClassName | 对话框外层容器的类名 | string   | - |
| afterClose | Modal 完全关闭后的回调 | function | 无 |

#### 清空旧数据

> `<Modal />` 组件有标准的 React 生命周期，关闭后状态不会自动清空。
> 如果希望每次打开都是新内容，需要自行手动清空旧的状态。或者打开时给 Modal 设置一个[全新的 key](https://github.com/ant-design/ant-design/issues/4165)， React 会渲染出一个全新的对话框。

> ```
> <Modal key={this.state.newRandomKey} visible={this.state.visible} />
> ```

### Modal.xxx()

包括：

- `Modal.info`
- `Modal.success`
- `Modal.error`
- `Modal.warning`
- `Modal.confirm`

以上均为一个函数，参数为 object，具体属性如下：

| 参数       | 说明           | 类型             | 默认值       |
|------------|----------------|------------------|--------------|
| title      | 标题           | string\|ReactNode | 无           |
| content    | 内容           | string\|ReactNode | 无           |
| onOk       | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭      | function         | 无           |
| onCancel   | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭       | function         | 无           |
| width      | 宽度           | string\|number | 416           |
| iconType   | 图标 Icon 类型    | string | question-circle |
| okText     | 确认按钮文字    | string           | 确定       |
| cancelText | 取消按钮文字    | string           | 取消       |
| maskClosable | 点击蒙层是否允许关闭 | Boolean   | `false`    |

<style>
.code-box-demo .ant-btn {
  margin-right: 8px;
}
</style>
-												docs: update documentation format

											
										
										
											2016-03-31 14:17:09 +08:00
+								---
-												docs: 调整组件导航结构 (#3758)

- Layout 更名为 Grid
											
										
										
											2016-11-09 14:43:32 +08:00
+								type: Feedback
-												docs: update documentation format

											
										
										
											2016-03-31 14:17:09 +08:00
+								category: Components
-												docs: update docs details

											
										
										
											2016-09-21 11:28:38 +08:00
+								subtitle: 对话框
 								title: Modal
-												docs: update documentation format

											
										
										
											2016-03-31 14:17:09 +08:00
+								---
-												挖坑

											
										
										
											2015-05-27 15:43:29 +08:00
-												update modal

											
										
										
											2015-06-05 10:39:30 +08:00
+								模态对话框。
 								## 何时使用
 								需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
-												Add some info type Modal, close #244

											
										
										
											2015-09-07 11:48:57 +08:00
+								另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。
-												move confirm into modal

											
										
										
											2015-06-12 19:41:30 +08:00
-												update modal

											
										
										
											2015-06-05 10:39:30 +08:00
+								## API
-												挖坑

											
										
										
											2015-05-27 15:43:29 +08:00
-												update modal demo

											
										
										
											2015-06-10 16:43:35 +08:00
+								| 参数       | 说明           | 类型             | 默认值       |
 								|------------|----------------|------------------|--------------|
-												docs: Unify type naming (#4636)

* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types

											
										
										
											2017-01-20 20:10:50 +08:00
+								| visible    | 对话框是否可见 | boolean          | 无           |
 								| confirmLoading | 确定按钮 loading | boolean    | 无           |
 								| title      | 标题           | string\|ReactNode | 无           |
 								| closable   | 是否显示右上角的关闭按钮 | boolean    | true        |
-												Add confirmLoading prop for Modal

You can use `confirmLoading` to cancel button loading status.

```
onOk() {
  ...
  this.setState({
    confirmLoading: false
  });
}
```

Fix #322

											
										
										
											2015-09-22 15:06:10 +08:00
+								| onOk       | 点击确定回调       | function     | 无           |
-												Fix Modal onCancel argument, ref #980

											
										
										
											2016-02-02 14:54:34 +08:00
+								| onCancel   | 点击遮罩层或右上角叉或取消按钮的回调  | function(e)  | 无         |
-												docs: Unify type naming (#4636)

* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types

											
										
										
											2017-01-20 20:10:50 +08:00
+								| width      | 宽度           | string\|number | 520           |
 								| footer     | 底部内容       | string\|ReactNode | 确定取消按钮 |
 								| okText     | 确认按钮文字    | string           | 确定       |
 								| cancelText | 取消按钮文字    | string           | 取消       |
 								| maskClosable | 点击蒙层是否允许关闭 | boolean   | true       |
 								| style | 可用于设置浮层的样式，调整浮层位置等 | object   | - |
 								| wrapClassName | 对话框外层容器的类名 | string   | - |
-												docs:  add document for `afterClose` props for Modal (#4448)

+ close #4445
											
										
										
											2017-01-05 12:06:27 +08:00
+								| afterClose | Modal 完全关闭后的回调 | function | 无 |
-												move confirm into modal

											
										
										
											2015-06-12 19:41:30 +08:00
-												Add doc about clearing Modal old state

											
										
										
											2017-01-16 14:30:07 +08:00
+								#### 清空旧数据
 								> `<Modal />` 组件有标准的 React 生命周期，关闭后状态不会自动清空。
 								> 如果希望每次打开都是新内容，需要自行手动清空旧的状态。或者打开时给 Modal 设置一个[全新的 key](https://github.com/ant-design/ant-design/issues/4165)， React 会渲染出一个全新的对话框。
 								> ```
 								> <Modal key={this.state.newRandomKey} visible={this.state.visible} />
 								> ```
-												Add some info type Modal, close #244

											
										
										
											2015-09-07 11:48:57 +08:00
+								### Modal.xxx()
-												move confirm into modal

											
										
										
											2015-06-12 19:41:30 +08:00
-												Add some info type Modal, close #244

											
										
										
											2015-09-07 11:48:57 +08:00
+								包括：
 								- `Modal.info`
 								- `Modal.success`
 								- `Modal.error`
-												Add Modal.warning

											
										
										
											2016-04-11 14:59:37 +08:00
+								- `Modal.warning`
-												Add some info type Modal, close #244

											
										
										
											2015-09-07 11:48:57 +08:00
+								- `Modal.confirm`
 								以上均为一个函数，参数为 object，具体属性如下：
-												move confirm into modal

											
										
										
											2015-06-12 19:41:30 +08:00
 								| 参数       | 说明           | 类型             | 默认值       |
 								|------------|----------------|------------------|--------------|
-												docs: Unify type naming (#4636)

* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types

											
										
										
											2017-01-20 20:10:50 +08:00
+								| title      | 标题           | string\|ReactNode | 无           |
 								| content    | 内容           | string\|ReactNode | 无           |
-												support promise for modal

											
										
										
											2015-06-25 15:29:56 +08:00
+								| onOk       | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭      | function         | 无           |
-												Modal.confirm, iconClassName => iconType

											
										
										
											2016-04-11 14:57:29 +08:00
+								| onCancel   | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭       | function         | 无           |
-												docs: Unify type naming (#4636)

* Unify name of ReactNode type in document

* Lowser all string type name

* Lowercase all number type name

* Lowercase all boolean type name

* Unify array type

* Lowercase all object type name

* Unify mutilple types

											
										
										
											2017-01-20 20:10:50 +08:00
+								| width      | 宽度           | string\|number | 416           |
 								| iconType   | 图标 Icon 类型    | string | question-circle |
 								| okText     | 确认按钮文字    | string           | 确定       |
 								| cancelText | 取消按钮文字    | string           | 取消       |
-												feat: Modal.confirm add maskClosable option (#4488) (#4490)

* feat: Modal.confirm add maskClosable option (#4488)

* feat: Modal.confirm add maskClosable option (#4488)

											
										
										
											2017-01-07 15:17:27 +08:00
+								| maskClosable | 点击蒙层是否允许关闭 | Boolean   | `false`    |
-												Add some info type Modal, close #244

											
										
										
											2015-09-07 11:48:57 +08:00
 								<style>
 								.code-box-demo .ant-btn {
 								  margin-right: 8px;
 								}
 								</style>