Modal 模态对话框

展示类 · Modal

模态对话框

模态对话框用于等待用户响应、告知用户重要信息或在不丢失上下文的情况下展示更多信息

代码演示

如何引入

基本

点击遮罩层不可关闭

修改 maskClosable 为 false 则不可通过点击遮罩层来关闭对话框。

自定义按钮文字

通过设置 okText 与 cancelText 属性可自定义按钮显示的文字。

注意：命令式调用的 Modal 需要通过这两个属性来设置 i18 的文本，因为我们无法修改React组件树，命令式调用插入的Component无法消费到Locale相关的Context

自定义按钮属性

通过设置 okButtonProps 与 cancelButtonProps 属性可自定义按钮的属性。

自定义对话框头部和页脚

如果需要实现更丰富的个性化需求，可以通过 header 自定义头部，footer 自定义页脚的按钮。把 header 设为 null时则不展示头部区域；不需要显示任何按钮时，同样可以把 footer 设为 null。

自定义对话框的样式

通过设置 style 可以自定义样式及位置如 style.top，也可以通过 centered 使对话框居中显示。也可以通过设置 maskStyle 自定义遮罩样式，及 bodyStyle 自定义对话框内容样式。

自定义的对话框

通过灵活使用使用 header，footer等属性可以实现一个完全自定义的对话框。

全屏Modal

使用 fullScreen={true} 可以开启全屏对话框

命令式调用

使用 confirm() 可以设置一个确认框。支持各种类型的信息提示。命令式调用也可以自定义 icon , 支持 string 和 ReactNode 类型。其他 Modal 支持的 props 都可以传入。

Hooks用法

通过 Modal.useModal 创建支持读取 context 的 contextHolder。

API参考

属性	说明	类型	默认值
afterClose	对话框完全关闭后的回调函数 v1.16.0 后提供	() => void	无
bodyStyle	对话框内容的样式	CSSProperties	无
cancelButtonProps	取消按钮的 props	ButtonProps	无
cancelText	取消按钮的文字	string	无
centered	是否居中显示	boolean	false
className	可用于设置样式类名	string	无
closable	是否显示右上角的关闭按钮	boolean	true
closeIcon	关闭按钮的icon v1.0.0 后提供	ReactNode	<IconClose />
closeOnEsc	允许通过键盘事件Esc触发关闭 v1.0.0 后提供	boolean	false
confirmLoading	确认按钮 loading	boolean	false
content	对话框内容	ReactNode	无
footer	对话框底部	ReactNode	无
fullScreen	对话是否是全屏（会覆盖 width height） v1.18.0 后提供	boolean	false
getPopupContainer	指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` v0.33.0 后提供	() => HTMLElement	() => document.body
hasCancel	是否显示取消按钮	boolean	true
header	对话框头部	ReactNode	无
height	高度	number	无
icon	自定义icon v1.1.0 后提供	ReactNode	-
keepDOM	关闭对话框时是否销毁 v1.0.0 后提供	boolean	false
lazyRender	配合 keepDOM 使用，为 true 时挂载时不会渲染对话框组件 v1.0.0 后提供	boolean	true
mask	是否显示遮罩	boolean	true
maskClosable	是否允许通过点击遮罩来关闭对话框	boolean	true
maskStyle	遮罩的样式	CSSProperties	无
motion	动画效果开关	boolean	true
okButtonProps	确认按钮的 props	ButtonProps	无
okText	确认按钮的文字	string	无
okType	确认按钮的类型, 可选: 'primary'、'secondary'、'tertiary'、'warning'、'danger'	string	primary
size	对话框宽度尺寸，支持 `small`(448px)， `medium`(684px), `large`(920px)，`full-width`(100vw - 64px) v1.0.0 后提供	string	'small'
style	可用于设置样式	CSSProperties	无
title	对话框的标题	ReactNode	无
visible	对话框是否可见	boolean	false
width	宽度	number	448
zIndex	遮罩的 z-index 值	number	1000
onCancel	取消对话框时的回调函数	(e: any) => void \| Promise<any>	无
onOk	点击确认按钮时的回调函数	(e: any) => void \| Promise<any>	无

Modal.info
Modal.success
Modal.error
Modal.warning
Modal.confirm

属性	说明	类型	默认值
bodyStyle	对话框内容的样式	CSSProperties	无
cancelButtonProps	取消按钮的 props	ButtonProps	无
cancelText	取消按钮的文字	string	无
centered	是否居中显示	boolean	false
className	可用于设置样式类名	string	无
closable	是否显示右上角的关闭按钮	boolean	true
confirmLoading	确认按钮 loading	boolean	false
content	对话框内容	ReactNode	无
footer	对话框底部	ReactNode	无
header	对话框头部	ReactNode	无
height	高度	number	无
icon	自定义icon	ReactNode	-
mask	是否显示遮罩	boolean	true
maskClosable	是否允许通过点击遮罩来关闭对话框	boolean	true
maskStyle	遮罩的样式	CSSProperties	无
okButtonProps	确认按钮的 props	ButtonProps	无
okText	确认按钮的文字	string	无
okType	确认按钮的类型	string	primary
style	可用于设置样式	CSSProperties	无
title	对话框的标题	ReactNode	无
width	宽度	number	520
zIndex	遮罩的 z-index 值	number	1000
onCancel	取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	(e: any) => void \| Promise<any>	无
onOk	点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	(e: any) => void \| Promise<any>	无

以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

Modal.destroyAll v>=0.37.0

使用 Modal.destroyAll() 可以销毁命令式及以上.info()等创建的弹窗。

Modal.useModal v>=1.2.0
当你需要使用 Context 时，可以通过 Modal.useModal 创建一个 contextHolder 插入相应的节点中。此时通过 hooks 创建的 Modal 将会得到 contextHolder 所在位置的所有上下文。创建的 modal 对象拥有与 Modal.method 相同的创建通知方法。

设计变量

FAQ

为什么使用 LocaleProvider 后， Modal.confirm 确认、取消按钮的文本没有国际化？在1.2版本之后，当你需要获取 context 信息，如 ConfigProvider 或者 LocaleProvider 的配置时，可以通过 Modal.useModal 方法来返回 modal 实体以及 contextHolder 节点。将 contextHolder 插入到你需要获取 context 位置即可。
如果是1.2版本之前，或者不想使用 Hooks 的写法，也可以通过 okText 和 cancelText 这两个属性来设置 i18 的文本。