React Modal

React based dialog box components, automatic center, adaptive size, support before and after open callback methods

Install

yarn add @zddi/modal

Usage Modal

import Modal from "@zddi/modal";
import "@zddi/modal/modal.css";

API

| Property | Type | Default | Description | | -------------------- | ---------- | ------- | ------------------------------------------------------------- | | open | Boolean | false | Whether to open the dialog box | | close | Function | - | Close the triggered callback function | | loading | Boolean | true | Whether to display loading | | children | React Node | - | Used to confine a dialog box content area | | footer | React Node | - | Used at the bottom of the configuration dialog | | showMask | Boolean | true | Show the mask layer | | closeOnEsc | Boolean | true | Whether support press esc to close | | closeOnDocumentClick | Boolean | false | Support for clickable document closure | | showHeader | Boolean | true | Whether to display the title or not | | dragHeader | Boolean | true | Whether dragging is supported | | beforeOpen | Function | - | The callback function that fires before the dialog box opens | | beforeClose | Function | - | The callback function that fires before the dialog box closes | | isForm | Boolean | false | The outer layer is wrapped with the form tag | | FormProps | Object | { } | Attribute of the form tag |

版本历史

1.1.10

2024 年 1 月 26 日 星期五 10 时 04 分 31 秒 CST

• 支持form标签包裹

1.1.8

2023 年 9 月 18 日 星期一 14 时 04 分 11 秒 CST

• 删除全局变量modalWrapScroll，还原 modal 内容的最大高度，增加全局变量modalDynamicMaxHeight 控制 modal 最大高度是否动态获取浏览器高度

1.1.7

2023 年 9 月 14 日 星期四 10 时 04 分 37 秒 CST

• wrapScroll 参数替换为全局变量__modalWrapScroll 控制

1.1.6

2023 年 9 月 5 日 星期二 10 时 27 分 04 秒 UTC

• 新增 wrapScroll 参数，调整 z-index