# @rax-ui/modal > Rax UI Modal Latest version **1.0.0-beta.62** (published 2020-11-24) · 0 weekly downloads ## Install ```sh npm install @rax-ui/modal pnpm add @rax-ui/modal yarn add @rax-ui/modal bun add @rax-ui/modal ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0-beta.62 | | Published | 2020-11-24 | | First published | 2019-09-28 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 9 | | Unpacked size | 26.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | jinli.lyy@alibaba-inc.com | | Maintainers | lianmin, amdgigabyte, myronliu347 | | Keywords | Rax, rax-component | ## Links - npm: https://www.npmjs.com/package/@rax-ui/modal - npm.io page: https://npm.io/package/@rax-ui/modal ## Dependencies (9) - [rax-text](https://npm.io/package/rax-text.md) ^1.2.0 - [rax-view](https://npm.io/package/rax-view.md) ^1.1.0 - [universal-env](https://npm.io/package/universal-env.md) ^3.2.0 - [@rax-ui/styles](https://npm.io/package/@rax-ui/styles.md) ^1.0.0-beta.62 - [rax-clone-element](https://npm.io/package/rax-clone-element.md) ^1.0.0 - [rax-create-portal](https://npm.io/package/rax-create-portal.md) ^1.0.0 - [rax-find-dom-node](https://npm.io/package/rax-find-dom-node.md) ^1.0.1 - [@rax-ui/transition](https://npm.io/package/@rax-ui/transition.md) ^1.0.0-beta.62 - [rax-is-valid-element](https://npm.io/package/rax-is-valid-element.md) ^1.0.0 ## Recent versions - 1.0.0-beta.62 (latest) — 2020-11-24 - 1.0.0-beta.47 (next) — 2020-04-17 - 1.0.0-beta.60 — 2020-08-28 - 1.0.0-beta.59 — 2020-08-18 - 1.0.0-beta.57 — 2020-06-22 - 1.0.0-beta.56 — 2020-06-03 - 1.0.0-beta.55 — 2020-05-26 - 1.0.0-beta.54 — 2020-05-13 - 1.0.0-beta.53 — 2020-05-12 - 1.0.0-beta.52 — 2020-05-11 - 1.0.0-beta.51 — 2020-04-29 - 1.0.0-beta.50 — 2020-04-27 - 1.0.0-beta.49 — 2020-04-23 - 1.0.0-beta.48 — 2020-04-23 - 1.0.0-beta.46 — 2020-04-15 - … 31 more at https://npm.io/package/@rax-ui/modal/versions ## README --- 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 | [] | | 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 | 背景样式 | --- _Source: https://npm.io/package/@rax-ui/modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._