Modal — Arco Design v2.66.18 docs

Open a floating layer on the current page to carry related operations.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Dialog with text.
Async Close: When using a form in a dialog, such as submitting a form, click OK to close the dialog asynchronously.
Customize Footer: Pass in okButtonProps and cancelButtonProps to customize the props of the OK button and the cancel button respectively. If okButtonProps and cancelButtonProps still cannot meet your needs, you can directly pass in footer to customize the footer content.
Customize Title: The title parameter supports text or react nodes, which can support title bar display in various scenarios.
Confirm Modal: Use Modal.confirm() to quickly pop up a confirmation modal dialog.
Message Modal Dialog: There are four types of message modal dialog: info, success, warning, and error. Only a button is provided to close message modal dialog.
Customize Button Text: Set okText and cancelText to customize the button text.
Update and Close: Manually update and close the dialog which created by Modal.
Customize Position: Use alignCenter combined with style to set the position of the dialog.
Request Data: Show loading effect in dialog.
Dialog with Alert: Show Alert in dialog.
Dialog with Steps: Dialog with horizontal step bar.
Customize Rendering: You can customize the rendering dialog through modalRender to realize the drag and drop function.
Hooks Usage: useModal。

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Property	Description	Type	DefaultValue	Version
alignCenter	Modal is centered vertically and horizontally	boolean	`true`	-
autoFocus	Whether to focus the first focusable element	boolean	`true`	-
closable	Whether to show the close button in TitleBar	boolean	`-`	-
confirmLoading	Whether the `ok` button is loading	boolean	`-`	-
escToExit	Whether enable press `ESC` to close Modal	boolean	`true`	-
focusLock	Whether to lock the focus in the Modal	boolean	`true`	-
mask	Whether show mask	boolean	`true`	-
maskClosable	Whether enable click mask to close Modal.	boolean	`true`	-
mountOnEnter	Whether to render DOM when first opened	boolean	`true`	-
simple	Simple Mode, no dividing line, the bottom button is displayed in the center.The Alter Modal called by the default method will use `simple` mode. When set to true, the close icon is not display	boolean	`-`	-
unmountOnExit	Whether to destroy DOM after closed	boolean	`-`	-
visible	Whether the Modal is visible	boolean	`-`	-
cancelText	The text of `cancel` button	ReactNode	`-`	-
closeIcon	Customize the close icon	ReactNode	`-`	2.21.0
okText	The text of `ok` button	ReactNode	`-`	-
title	The title of Modal	string \| ReactNode	`-`	-
cancelButtonProps	The props of `cancel` button	ButtonProps	`-`	-
className	Additional css class	string \| string[]	`-`	-
maskStyle	The style of mask	CSSProperties	`-`	2.6.0
okButtonProps	The props of `ok` button	ButtonProps	`-`	-
onOk	Callback when click ok button	(e?: MouseEvent) => Promise<any> \| void	`-`	-
style	Additional style	CSSProperties	`-`	-
wrapClassName	The class of the wrapped dom	string \| string[]	`-`	-
wrapStyle	The style of the wrapped dom	CSSProperties	`-`	2.16.0
afterClose	Callback when Modal closed	() => void	`-`	-
afterOpen	Callback when Modal opened	() => void	`-`	-
footer	Custom `footer`. if it is null, the footer will not be displayed.	ReactNode \| ((cancelButtonNode: ReactNode, okButtonNode: ReactNode) => ReactNode)	`-`	2.12.0
getChildrenPopupContainer	The Popup in Modal. Such as `Select` and `Tooltip` are mounted in the Modal	(node: HTMLElement) => Element	`-`	-
getPopupContainer	Specify the parent node of the Modal	() => Element	`() => document.body`	-
modalRender	Custom the render of Modal	(modalNode: ReactNode) => ReactNode	`-`	2.2.0
onCancel	Callback when click cancel button	() => void	`-`	-

Modal.method(config)

Including the following:

Modal.confirm(config)
Modal.info(config)
Modal.success(config)
Modal.warning(config)
Modal.error(config)

The above functions will return an object, which can be used to update or close the Modal. Ex:

const info = Modal.info({ title: 'Info' });
info.update({ title: 'Updated Title' });
info.close();

config's details (extends all Modal's props):

Property	Description	Type	Default
content	The content of Modal	`ReactNode`	`-`
icon	The icon of Modal	`ReactNode`	`-`

Modal.config Options

Global Set Modal.confirm|success|info|error|warning Props, Similar Message.config Options, The <Modal /> will get the context config from ConfigProvider.

Modal.config({
  // Custom prefix
  prefixCls: 'arco',
  // Display in Simple Mode
  simple: true
});

Modal.destroyAll

Modal.destroyAll will close all confirm modal (including Modal.confirm Modal.info Modal.success Modal.error Modal.warning), generally used when routing changes, Close all popups.

Modal.destroyAll();

Modal.useModal

Use method function to open Modal, such as Modal.confirm Modal.warning, because it is directly rendered through ReactDOM.render, so it is not in the context, so you cannot get context. If you want to get context, you can use useModal, Put the contextHolder in the context.

const [modal, contextHolder] = Modal.useModal();

<Context.Provider>
   {contextHolder}
   <Button onClick={() => modal.warning({ title:'Title', content:'content' })}>Open</Button>
</Context.Provider>