---
group: Feedback
category: Components
title: Modal
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wM3qQ5XrhlcAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fBrgSJBmavgAAAAAAAAAAAAADrJ8AQ/original
demo:
cols: 2
---
Modal dialogs.
## 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 [`App.useApp` ](/components/app/ ) hooks.
## Examples
<!-- prettier - ignore -->
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/async.tsx" > Asynchronously close< / code >
< code src = "./demo/footer.tsx" > Customized Footer< / code >
< code src = "./demo/confirm.tsx" > Confirmation modal dialog< / code >
< code src = "./demo/locale.tsx" > Internationalization< / code >
< code src = "./demo/manual.tsx" > Manual to update destroy< / code >
< code src = "./demo/position.tsx" > To customize the position of modal< / code >
< code src = "./demo/dark.tsx" debug > Dark Bg< / code >
< code src = "./demo/button-props.tsx" > Customize footer buttons props< / code >
< code src = "./demo/hooks.tsx" > Use hooks to get context< / code >
< code src = "./demo/modal-render.tsx" > Custom modal content render< / code >
< code src = "./demo/width.tsx" > To customize the width of modal< / code >
< code src = "./demo/static-info.tsx" > Static Method< / code >
< code src = "./demo/confirm-router.tsx" > destroy confirmation modal dialog< / code >
< code src = "./demo/render-panel.tsx" debug > \_InternalPanelDoNotUseOrYouWillBeFired</ code >
< code src = "./demo/custom-mouse-position.tsx" debug > Control modal's animation origin position< / code >
< code src = "./demo/wireframe.tsx" debug > Wireframe< / code >
< code src = "./demo/component-token.tsx" debug > Component Token< / code >
## API
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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 | | |
| cancelButtonProps | The cancel button props | [ButtonProps ](/components/button/#api ) | - | |
| cancelText | Text of the Cancel button | ReactNode | `Cancel` | |
| centered | Centered Modal | boolean | false | |
| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | < CloseOutlined /> | |
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false | |
| destroyOnClose | Whether to unmount child components on onClose | boolean | false | |
| focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | 4.9.0 |
| footer | Footer content, set as `footer={null}` when you don't need default buttons | ReactNode | (OK and Cancel buttons) | |
| forceRender | Force render Modal | boolean | false | |
| getContainer | The mounted node for Modal but still display at fullscreen | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
| 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 | true | |
| maskStyle | Style for modal's mask element | CSSProperties | | |
| modalRender | Custom modal content render | (node: ReactNode) => ReactNode | - | 4.7.0 |
| okButtonProps | The ok button props | [ButtonProps ](/components/button/#api ) | - | |
