# @beisen-phoenix/modal > 模式弹层 Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads ## Install ```sh npm install @beisen-phoenix/modal pnpm add @beisen-phoenix/modal yarn add @beisen-phoenix/modal bun add @beisen-phoenix/modal ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.3.55 | | Published | 2019-11-25 | | First published | 2019-04-08 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 10 | | Unpacked size | 54.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | beisencorp | ## Links - npm: https://www.npmjs.com/package/@beisen-phoenix/modal - npm.io page: https://npm.io/package/@beisen-phoenix/modal ## Dependencies (10) - [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54 - [@beisen-phoenix/button](https://npm.io/package/@beisen-phoenix/button.md) ^3.3.55 - [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.7.1 - [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55 - [@beisen-phoenix/textarea](https://npm.io/package/@beisen-phoenix/textarea.md) ^3.3.55 - [@beisen-phoenix/container](https://npm.io/package/@beisen-phoenix/container.md) ^3.3.55 - [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55 - [@beisen-phoenix/common-utils](https://npm.io/package/@beisen-phoenix/common-utils.md) ^3.3.55 - [@beisen-phoenix/css-var-polyfill](https://npm.io/package/@beisen-phoenix/css-var-polyfill.md) ^3.3.55 - [@beisen-phoenix/common-translation](https://npm.io/package/@beisen-phoenix/common-translation.md) ^3.3.55 ## Recent versions - 3.3.55 (latest) — 2019-11-25 - 3.2.44-rc.1 (rc) — 2019-10-24 - 3.3.54 — 2019-11-25 - 3.3.53 — 2019-11-25 - 3.3.52 — 2019-11-24 - 3.3.51 — 2019-11-23 - 3.3.50 — 2019-11-22 - 3.3.49 — 2019-11-22 - 3.3.47 — 2019-11-22 - 3.3.45 — 2019-11-21 - 3.3.43 — 2019-11-21 - 3.3.42 — 2019-11-21 - 3.3.41-beta.1 — 2019-11-21 - 3.3.41 — 2019-11-21 - 3.3.39 — 2019-11-20 - … 401 more at https://npm.io/package/@beisen-phoenix/modal/versions ## README # @beisen-phoenix/modal 模式弹层 # API | 参数 | 说明 | 类型 | 默认值 | | --------------------- | ------------------------------------------------- | ------------------------ | --------- | | visible | 是否显示 | boolean | false | | hasMasker | 是否显示遮罩层 | boolean | true | | maskerClosable | 点击遮罩是否关闭 Modal | boolean | true | | escClosable | 点击 ESC 键是否关闭 Modal | boolean | true | | hideDocsBodyScrollbar | 是否在打开弹层时，隐藏 document.body 的滚动条 | boolean | false | | timeout | 动画执行的最大时间 | number | 300 | | title | 标题 | string / React.ReactNode | - | | confirmText | 确认按钮文字 | string | - | | cancelText | 取消按钮文字 | string | - | | confirmLoading | 确定按钮 loading 状态 | boolean | false | | footer | 自定义底部按钮区域，若传 null 则不显示底部 | React.ReactNode / null | - | | translation | 国际化，详情见下方 | object | - | | onClose | 点击遮罩层或右上角叉叉或按下键盘 ESC 键的回调 | function() | - | | onConfirm | 点击确定按钮的回调 | function(event) | - | | onCancel | 点击取消按钮的回调 | function(event) | - | | afterOpen | 打开之后的回调 | function() | - | | afterClose | 关闭之后的回调 | function() | - | | hasHeader | 是否显示头部 | boolean | true | | extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用 | string | - | | size | 弹层大小 可选`small` `large` | string | small | | style | 自定义弹层样式 | object | undefined | | lang | 当前语言环境(zh_CN,en_US,zh_TW) | string | zh_CN | 否 | ## translation ``` translation: { confirmText: '确定', cancelText: '取消' } ``` ###changelog ### 2019-11-19 > 新增 lang 属性，用于表示当前的语言环境，取值范围为“zh_CN,zh_TW,en_US”内部新增中文简体、英文、中文繁体语言包。 2019-09-20 1、新增 height 参数，可以用来控制弹层的高度，内联样式。 2019-08-27 1、新增 hasHeader 参数，用于控制弹窗头部是否显示。 2、在 title 为空的时候不再控制同步是否显示 2019-08-09 ### Modal.xxx() 2019-06-27 新增 api | extraCls | 自定义组件容器 class,一般用于覆盖组件默认样式使用| string | 无| No | 2019-06-27 移除 api: top left | size | 弹层大小 可选`small` `large` | string | small | 包括： - `Modal.show` - `Modal.close` 以上均为一个函数，参数为 object，具体属性如下： | 参数 | 说明 | 类型 | 默认值 | 是否必传 | | --------------------- | ---------------------------------------------------------------- | ------------------------ | ------ | -------- | | id | modal 根节点 id | string | - | | hasMasker | 是否显示遮罩层 | boolean | true | | maskerClosable | 点击遮罩是否关闭 Modal | boolean | true | | escClosable | 点击 ESC 键是否关闭 Modal | boolean | true | | hideDocsBodyScrollbar | 是否在打开弹层时，隐藏 document.body 的滚动条 | boolean | false | | timeout | 动画执行的最大时间 | number | 300 | | title | 标题，不传表示不显示标题 | string / React.ReactNode | - | | confirmText | 确认按钮文字 | string | - | | cancelText | 取消按钮文字 | string | - | | confirmLoading | 确定按钮 loading 状态 | boolean | false | | footer | 自定义底部按钮区域，若传 null 则不显示底部 | React.ReactNode / null | - | | translation | 国际化，详情见上方 | object | - | | onClose | 点击遮罩层或右上角叉叉或按下键盘 ESC 键、调用 Modal.close 的回调 | function(event) | - | | onConfirm | 点击确定按钮的回调 | function(event) | - | | onCancel | 点击取消按钮的回调 | function(event) | - | | afterOpen | 打开之后的回调 | function() | - | | afterClose | 关闭之后的回调 | function() | - | 返回值为一个 object，具体属性如下： - `close` : 一个用于关闭当前 dialog 的 function 使用方法： ```javascript const modal = Modal.show({ title: "这里是标题" }); modal.close(); // 关闭当前对话框 ``` --- _Source: https://npm.io/package/@beisen-phoenix/modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._