# Modal

- category: Components
- chinese: 模态框
- type: 基本

---

模态对话框。

## 何时使用

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


## API

- 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：
`type` -> `size` -> `disabled` -> `onClick`

- 按钮的属性说明如下：

属性             | 类型     | 默认值              | 说明
-----            | -----    |-----                |------
type             | string   | default             | 设置按钮类型，可选值为 `default` `small` 
title            | string   | ''                  | 标题
header           | node     | null                | 自定义头部, 忽略title
okText           | string   | ''                  | 确认按钮文本
cancelText       | string   | ''                  | 取消按钮文本
onClose          | Function | `function(isOk) {}` | 关闭事件的 handler
footer           | node     | null                | 自定义底栏，按钮部分，okText
backdropCloseable | Boolean  | false               | 点击蒙层关闭 

- Demo

```
Modal.show(<Modal title=""
    okText=""
    onClose={}>
    
    inner content...
    
</Modal>)
    
```

### 静态接口:

功能        | 函数      | 参数              | 说明
----        |-----      |-------            |-------
显示        | show/open | <Modal/> ,必填    | 显示对话框
隐藏        | hide/close| 空                | 隐藏对话框