Search
Modal
A modal dialog displays content that requires user interaction, in a layer above the page.
When to use
When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use antd.Modal.confirm(), and so on.
Basic
Basic modal.
Asynchronously close
Asynchronously close a modal dialog when a the OK button is pressed. For example, you can use this pattern when you submit a form.
Customized Footer
A more complex example which define a customized footer button bar. The dialog will change to loading state after clicking the submit button, and when the loading is done, the modal dialog will be closed.
You could set footer to null if you don't need default footer buttons.
You could set footer to null if you don't need default footer buttons.
Confirmation modal dialog
Use confirm() to show a confirmation modal dialog. Let onCancel/onOk function return a promise object to delay closing the dialog.
Information modal dialog
In the various types of information modal dialog, only one button to close dialog is provided.
Internationalization
To customize the text of the buttons, you need to set okText and cancelText props.
Manual to update destroy
Manually updating and destroying a modal from Modal.method.
To customize the position of modal
You can use centered,style.top or other styles to set position of modal dialog.
Customize footer buttons props
Passing okButtonProps and cancelButtonProps will customize the OK button and cancel button props.
Destroy confirmation modal dialog
Modal.destroyAll() will destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically.
Use hooks to get context
Use Modal.useModal to get contextHolder with context accessible issue.
To customize the width of modal
Use width to set the width of the modal dialog.
API
| Property | Description | Type | Default |
|---|---|---|---|
afterClose | Specify a function that will be called when modal is closed completely. | function | - |
bodyStyle | Body style for modal body element. Such as height, padding etc. | CSSProperties | {} |
cancelText | Text of the Cancel button | string|ReactNode | Cancel |
centered | Centered Modal | boolean | false |
closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
closeIcon | custom close icon | ReactNode | - |
confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
destroyOnClose | Whether to unmount child components on onClose | boolean | false |
footer | Footer content, set as footer={null} when you don't need default buttons | string|ReactNode | OK and Cancel buttons |
forceRender | Force render Modal | boolean | false |
getContainer | Return the mount node for Modal | HTMLElement | () => HTMLElement | Selectors | false | document.body |
mask | Whether show mask or not. | boolean | true |
maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
maskStyle | Style for modal's mask element. | object | {} |
okText | Text of the OK button | string|ReactNode | OK |
okType | Button type of the OK button | string | primary |
okButtonProps | The ok button props | - | |
cancelButtonProps | The cancel button props | - | |
style | Style of floating layer, typically used at least for adjusting the position. | CSSProperties | - |
title | The modal dialog's title | string|ReactNode | - |
visible | Whether the modal dialog is visible or not | boolean | false |
width | Width of the modal dialog | string|number | 520 |
wrapClassName | The class name of the container of the modal dialog | string | - |
zIndex | The z-index of the Modal | Number | 1000 |
onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |
onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - |
Modal.method()
| Property | Description | Type | Default |
|---|---|---|---|
autoFocusButton | Specify which button to autofocus | null| ok | cancel | ok |
cancelText | Text of the Cancel button with Modal.confirm | string | Cancel |
centered | Centered Modal | boolean | false |
className | className of container | string | - |
content | Content | string|ReactNode | - |
icon | custom icon | ReactNode | |
keyboard | Whether support press esc to close | boolean | true |
mask | Whether show mask or not. | boolean | true |
maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | false |
okText | Text of the OK button | string | OK |
okType | Button type of the OK button | string | primary |
okButtonProps | The ok button props | - | |
cancelButtonProps | The cancel button props | - | |
title | Title | string|ReactNode | - |
width | Width of the modal dialog | string|number | 416 |
zIndex | The z-index of the Modal | Number | 1000 |
onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - |
onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - |