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

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

模态对话框。

## 何时使用

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

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

## API

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

### Modal.xxx()

包括：

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

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

| 参数       | 说明           | 类型             | 默认值       |
|------------|----------------|------------------|--------------|
| title      | 标题           | React.Element or String    | 无           |
| content    | 内容           | React.Element or String    | 无           |
| onOk       | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭      | function         | 无           |
| onCancel   | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭       | function         | 无           |
| width      | 宽度           | String or Number | 416           |
| iconType   | 图标 Icon 类型    | String | question-circle |
| okText     | 确认按钮文字    | String           | 确定       |
| cancelText | 取消按钮文字    | String           | 取消       |

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

											
										
										
											2016-03-31 14:17:09 +08:00
+								---
-												update components category name

											
										
										
											2016-06-27 18:21:12 +08:00
+								type: Views
-												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
+								| 参数       | 说明           | 类型             | 默认值       |
 								|------------|----------------|------------------|--------------|
-												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
+								| visible    | 对话框是否可见 | Boolean          | 无           |
 								| confirmLoading | 确定按钮 loading | Boolean    | 无           |
-												update modal demo

											
										
										
											2015-06-10 16:43:35 +08:00
+								| title      | 标题           | React.Element    | 无           |
-												feat: expose `closable` for Modal

											
										
										
											2016-01-06 10:21:02 +08:00
+								| 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)  | 无         |
-												update modal default props

											
										
										
											2015-08-25 16:56:08 +08:00
+								| width      | 宽度           | String or Number | 520           |
-												update modal demo

											
										
										
											2015-06-10 16:43:35 +08:00
+								| footer     | 底部内容       | React.Element    | 确定取消按钮 |
-												feat: Modal should support internationalization

											
										
										
											2015-11-24 11:01:36 +08:00
+								| okText     | 确认按钮文字    | String           | 确定       |
 								| cancelText | 取消按钮文字    | String           | 取消       |
-												Add propTypes and prop align in Modal docs

											
										
										
											2016-03-14 11:46:48 +08:00
+								| maskClosable | 点击蒙层是否允许关闭 | Boolean   | true       |
-												upgrade center modal demo

											
										
										
											2016-05-09 16:45:58 +08:00
+								| style | 可用于设置浮层的样式，调整浮层位置等 | Object   | - |
 								| wrapClassName | 对话框外层容器的类名 | String   | - |
-												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.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
 								| 参数       | 说明           | 类型             | 默认值       |
 								|------------|----------------|------------------|--------------|
 								| title      | 标题           | React.Element or String    | 无           |
-												fix(docs), confirm demo & docs

											
										
										
											2016-03-18 11:48:06 +08:00
+								| content    | 内容           | React.Element or String    | 无           |
-												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         | 无           |
-												Add some info type Modal, close #244

											
										
										
											2015-09-07 11:48:57 +08:00
+								| width      | 宽度           | String or Number | 416           |
-												Modal.confirm, iconClassName => iconType

											
										
										
											2016-04-11 14:57:29 +08:00
+								| iconType   | 图标 Icon 类型    | String | question-circle |
-												feat: Modal should support internationalization

											
										
										
											2015-11-24 11:01:36 +08:00
+								| okText     | 确认按钮文字    | String           | 确定       |
 								| cancelText | 取消按钮文字    | String           | 取消       |
-												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>