# @hi-ui/modal > A sub-package for @hi-ui/hiui. Latest version **5.0.0** (published 2026-06-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @hi-ui/modal pnpm add @hi-ui/modal yarn add @hi-ui/modal bun add @hi-ui/modal ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 5.0.0 | | Published | 2026-06-06 | | First published | 2021-11-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 20 | | Unpacked size | 114.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 880 | | Author | HiUI | | Maintainers | sivan, solarjoker, lanzhi_lee, zhouyun | ## Links - npm: https://www.npmjs.com/package/@hi-ui/modal - Repository: https://github.com/XiaoMi/hiui - Homepage: https://github.com/XiaoMi/hiui/tree/master/packages/ui/modal#readme - Issues: https://github.com/XiaoMi/hiui/issues - npm.io page: https://npm.io/package/@hi-ui/modal ## Dependencies (20) - [@hi-ui/env](https://npm.io/package/@hi-ui/env.md) ^5.0.0 - [@hi-ui/icons](https://npm.io/package/@hi-ui/icons.md) ^5.0.0 - [@hi-ui/button](https://npm.io/package/@hi-ui/button.md) ^5.0.0 - [@hi-ui/portal](https://npm.io/package/@hi-ui/portal.md) ^5.0.0 - [@hi-ui/use-id](https://npm.io/package/@hi-ui/use-id.md) ^5.0.0 - [@hi-ui/classname](https://npm.io/package/@hi-ui/classname.md) ^5.0.0 - [@hi-ui/container](https://npm.io/package/@hi-ui/container.md) ^5.0.0 - [@hi-ui/dom-utils](https://npm.io/package/@hi-ui/dom-utils.md) ^5.0.0 - [@hi-ui/func-utils](https://npm.io/package/@hi-ui/func-utils.md) ^5.0.0 - [@hi-ui/use-latest](https://npm.io/package/@hi-ui/use-latest.md) ^5.0.0 - [@hi-ui/use-toggle](https://npm.io/package/@hi-ui/use-toggle.md) ^5.0.0 - [@hi-ui/icon-button](https://npm.io/package/@hi-ui/icon-button.md) ^5.0.0 - [@hi-ui/react-utils](https://npm.io/package/@hi-ui/react-utils.md) ^5.0.0 - [@hi-ui/react-compat](https://npm.io/package/@hi-ui/react-compat.md) ^5.0.0 - [@hi-ui/type-assertion](https://npm.io/package/@hi-ui/type-assertion.md) ^5.0.0 - [@hi-ui/use-merge-refs](https://npm.io/package/@hi-ui/use-merge-refs.md) ^5.0.0 - [@hi-ui/use-scroll-lock](https://npm.io/package/@hi-ui/use-scroll-lock.md) ^5.0.0 - [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.5 - [@hi-ui/use-patch-element](https://npm.io/package/@hi-ui/use-patch-element.md) ^5.0.0 - [@hi-ui/use-merge-semantic](https://npm.io/package/@hi-ui/use-merge-semantic.md) ^5.0.0 ## Recent versions - 5.0.0 (latest) — 2026-06-06 - 5.0.0-rc.0 (rc) — 2026-06-02 - 5.0.0-experimental.3 (experimental) — 2026-05-06 - 5.0.0-canary.13 (canary) — 2026-03-08 - 5.0.0-alpha.0 (alpha) — 2025-09-29 - 4.0.0-beta.37 (feature) — 2022-07-13 - 5.0.0-experimental.2 — 2026-05-06 - 5.0.0-experimental.1 — 2026-03-08 - 5.0.0-experimental.0 — 2026-02-05 - 5.0.0-canary.12 — 2025-12-15 - 5.0.0-canary.11 — 2025-11-27 - 5.0.0-canary.10 — 2025-11-19 - 5.0.0-canary.9 — 2025-11-12 - 5.0.0-canary.8 — 2025-11-05 - 5.0.0-canary.7 — 2025-10-16 - … 95 more at https://npm.io/package/@hi-ui/modal/versions ## README # Modal 模态框 模态对话框一般会中断当前任务流，在相对无信息干扰的环境下完成微型任务 ## 何时使用 当前任务中需要中途填写信息或执行别的动作 常见于后台设置、新建编辑等场景 ## 使用示例 ## Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | -------------------------- | ------------------- | -------------------- | --------- | | title | 模态框标题 | string \| ReactNode | - | - | | visible | 是否显示模态框 | boolean | true \| false | false | | closeable | 是否展示右上角关闭按钮 | boolean | true \| false | true | | maskClosable | 是否允许点击蒙层关闭模态框 | boolean | true \| false | true | | cancelText | 取消按钮文案 | string | - | '取消' | | confirmText | 确认按钮文案 | string | - | '确定' | | confrimLoading | 确认按钮 loading 状态 | boolean | true \|false | - | | size | 模态框尺寸 | string | 'default' \| 'large' | 'default' | | style | 自定义模态框样式 | object | - | - | | footer | 自定义模态框底部 | ReactNode \| null | - | - | ## Events | 名称 | 说明 | 类型 | 参数 | 返回值 | | --------- | -------------------- | ---------- | ---- | ------ | | onConfirm | 确认事件触发时的回调 | () => void | - | - | | onCancel | 取消事件触发时的回调 | () => void | - | - | ## Methods `Modal.confirm({onConfirm, onCancel, title, content, type, confirmText, cancelText})` | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | -------------------- | ---------- | -------------------------------------------------------- | --------- | | onConfirm | 确认事件触发时的回调 | () => void | - | - | | onCancel | 取消事件触发时的回调 | () => void | - | - | | title | confirm 的标题 | string | - | string | | content | confirm 的内容 | string | - | - | | type | confirm 的类型 | string | 'default' \| 'success' \| 'error' \| 'warning' \| 'info' | 'default' | | cancelText | 取消按钮文案 | string | - | '取消' | | confirmText | 确认按钮文案 | string | - | '确定' | ## CHANGELOG | 参数 | 变更类型 | 变更内容 | 解决的问题 | | ------------------- | ---------- | ---------------- | ---------- | | size | update | 枚举值改变 | | | closeIcon | feature | | | | timeout | feature | | | | disabledPortal | feature | | | | container | feature | | | | onExited | feature | | | | onClose | feature | | | | showHeaderDivider | feature | | | | showFooterDivider | feature | | | | preload | feature | | | | unmountOnClose | feature | | | | width | feature | | | | height | feature | | | | innerRef | feature | | | | maskClosable | deprecated | | | | lockScroll | feature | | | | autoFocus | feature | | | | focusElementOnClose | update | 修复单词拼写错误 | | | trapFocus | feature | | | | returnFocusOnClose | feature | | | ### Modal.confirm > 点击蒙层不允许关闭 --- _Source: https://npm.io/package/@hi-ui/modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._