npm package: @rax-ui/modal
Description: Rax UI Modal
Author: jinli.lyy@alibaba-inc.com
Latest version: 1.0.0-beta.62

---
display: Modal
family: utils
---

# Modal

Modal 提供了弹出遮罩层的能力，为 `Dialog`、`Drawer` 等组件提供了底层能力。 (Weex, Web)

## API

### Props

| 名称                 | 说明                             | 类型                                                   | 默认值              |
| :------------------- | :------------------------------- | :----------------------------------------------------- | :------------------ |
| visible              | 对话框是否显示                   | boolean                                                | false               |
| container            | 对话框的容器                     |                                                        | () => document.body |
| disablePortal        | 禁用 `portal` 功能               | boolean                                                | false               |
| keepMounted          | 是否一直存在                     | boolean                                                | false               |
| hideBackdrop         | 是否隐藏遮盖背景                 | boolean                                                | false               |
| disableBackdropClose | 是否禁用背景点击关闭             | boolean                                                | false               |
| onEnter              | 开始进入时回调函数               | () => void                                             |                     |
| onExit               | 开始退出时回调函数               | () => void                                             |                     |
| onEntering           | 正在进入时回调函数               | () => void                                             |                     |
| onExiting            | 正在退出时回调函数               | () => void                                             |                     |
| onEntered            | 进入后回调函数                   | () => void                                             |                     |
| onExited             | 退出后回调函数                   | () => void                                             |                     |
| onBackdropClick      | 遮盖背景被点击时调用             | () => void                                             |                     |
| onClose              | 关闭时调用                       | (reason: string) => void                               |                     |
| transition           | 打开/关闭的过渡动效              | { transition: TransitonType, styles: { enter, exit } } |
| containerStyle       | 容器样式，设置 transition 后生效 | CSSProperties                                          |                     |

### TransitionType

| 名称           | 说明         | 类型                                                                                        | 默认值 |
| :------------- | :----------- | :------------------------------------------------------------------------------------------ | :----- |
| properties     | 过渡属性     | Array<keyof CSSProperties>                                                                  | []     |
| delay          | 延迟时间     | number                                                                                      | 0      |
| duration       | 动画持续时间 | number                                                                                      |        |
| timingFunction | 动画函数     | 'linear' / 'ease' / 'ease-in' / 'ease-out' / 'ease-in-out' / 'cubic-bezier(x1, y1, x2, y2)' | 'ease' |

### CSS API

| 名称     | 说明       |
| :------- | :--------- |
| modal    | 对话框样式 |
| backdrop | 背景样式   |