Modal

Default

APIs

NameDescriptionTypeDefault
style--{}--
className--string--
children--ReactNode--
titleThe modal dialog's titleReactNode--
widthWidth of the modal dialogstring|number|Partial___type--
height--string|number--
visible--boolean--
prefixCls--string--
classNames--{header?:string;body?:string;footer?:string;mask?:string;content?:string;wrapper?:string}--
loading--boolean--
rootClassName--string--
styles--{header?:object;body?:object;footer?:object;mask?:object;wrapper?:object;content?:object}--
animation--any--
footer--ReactNode|(originNode:React.ReactNode,extra:{ OkBtn: React.FC<{}>; CancelBtn: React.FC<{}>; })=>|string|number|unknown|ReactElement|Iterable<ReactNode>|ReactPortal|Promise<AwaitedReactNode>|boolean--
mask--boolean--
onCancelSpecify a function that will be called when a user clicks mask, close button on top right or Cancel button(e:React.MouseEvent<HTMLButtonElement, MouseEvent>)=>void--
openWhether the modal dialog is visible or notboolean--
closable--boolean|{closeIcon?:ReactNode;disabled?:boolean}--
onClose--(e:React.SyntheticEvent<Element, Event>)=>any--
afterClose--()=>void--
closeIcon--ReactNode--
maskStyle--{}--
forceRenderForce render Modalboolean--
keyboard--boolean--
zIndex--number--
maskClosableWhether to close the modal dialog when the mask (area outside the modal) is clickedboolean--
afterOpenChangeCallback when the animation ends when Modal is turned on and off(open:boolean)=>void--
destroyOnClose--boolean--
getContainer--string|HTMLElement|getContainerFunc|--
panelRef--|bivarianceHack|RefObject--
bodyStyle--{}--
transitionName--string--
wrapClassName--string--
centeredCentered Modalboolean--
focusTriggerAfterClose--boolean--
onOkSpecify a function that will be called when a user clicks the OK button(e:React.MouseEvent<HTMLButtonElement, MouseEvent>)=>void--
okButtonProps--{href?:string;htmlType?:"button"|"submit"|"reset";autoInsertSpace?:boolean;type?:"text"|"primary"|"link"|"default"|"dashed";color?:"primary"|"danger"|"default"|"blue"|"purple"|"cyan"|"green"|"magenta"|"pink"|"red"|"orange"|"yellow"|"volcano"|"geekblue"|"lime"|"gold";variant?:"text"|"link"|"dashed"|"outlined"|"solid"|"filled";icon?:ReactNode;iconPosition?:"start"|"end";shape?:"default"|"circle"|"round";size?:"small"|"middle"|"large";disabled?:boolean;loading?:boolean|{delay?:number;icon?:ReactNode};prefixCls?:string;className?:string;rootClassName?:string;ghost?:boolean;danger?:boolean;block?:boolean;children?:ReactNode;classNames?:object;styles?:object;style?:object;dangerouslySetInnerHTML?:object;onCopy?:(event:E)=>void;onCopyCapture?:(event:E)=>void;onCut?:(event:E)=>void;onCutCapture?:(event:E)=>void;onPaste?:(event:E)=>void;onPasteCapture?:(event:E)=>void;onCompositionEnd?:(event:E)=>void;onCompositionEndCapture?:(event:E)=>void;onCompositionStart?:(event:E)=>void;onCompositionStartCapture?:(event:E)=>void;onCompositionUpdate?:(event:E)=>void;onCompositionUpdateCapture?:(event:E)=>void;onFocus?:(event:E)=>void;onFocusCapture?:(event:E)=>void;onBlur?:(event:E)=>void;onBlurCapture?:(event:E)=>void;onChange?:(event:E)=>void;onChangeCapture?:(event:E)=>void;onBeforeInput?:(event:E)=>void;onBeforeInputCapture?:(event:E)=>void;onInput?:(event:E)=>void;onInputCapture?:(event:E)=>void;onReset?:(event:E)=>void;onResetCapture?:(event:E)=>void;onSubmit?:(event:E)=>void;onSubmitCapture?:(event:E)=>void;onInvalid?:(event:E)=>void;onInvalidCapture?:(event:E)=>void;onLoad?:(event:E)=>void;onLoadCapture?:(event:E)=>void;onError?:(event:E)=>void;onErrorCapture?:(event:E)=>void;onKeyDown?:(event:E)=>void;onKeyDownCapture?:(event:E)=>void;onKeyPress?:(event:E)=>void;onKeyPressCapture?:(event:E)=>void;onKeyUp?:(event:E)=>void;onKeyUpCapture?:(event:E)=>void;onAbort?:(event:E)=>void;onAbortCapture?:(event:E)=>void;onCanPlay?:(event:E)=>void;onCanPlayCapture?:(event:E)=>void;onCanPlayThrough?:(event:E)=>void;onCanPlayThroughCapture?:(event:E)=>void;onDurationChange?:(event:E)=>void;onDurationChangeCapture?:(event:E)=>void;onEmptied?:(event:E)=>void;onEmptiedCapture?:(event:E)=>void;onEncrypted?:(event:E)=>void;onEncryptedCapture?:(event:E)=>void;onEnded?:(event:E)=>void;onEndedCapture?:(event:E)=>void;onLoadedData?:(event:E)=>void;onLoadedDataCapture?:(event:E)=>void;onLoadedMetadata?:(event:E)=>void;onLoadedMetadataCapture?:(event:E)=>void;onLoadStart?:(event:E)=>void;onLoadStartCapture?:(event:E)=>void;onPause?:(event:E)=>void;onPauseCapture?:(event:E)=>void;onPlay?:(event:E)=>void;onPlayCapture?:(event:E)=>void;onPlaying?:(event:E)=>void;onPlayingCapture?:(event:E)=>void;onProgress?:(event:E)=>void;onProgressCapture?:(event:E)=>void;onRateChange?:(event:E)=>void;onRateChangeCapture?:(event:E)=>void;onResize?:(event:E)=>void;onResizeCapture?:(event:E)=>void;onSeeked?:(event:E)=>void;onSeekedCapture?:(event:E)=>void;onSeeking?:(event:E)=>void;onSeekingCapture?:(event:E)=>void;onStalled?:(event:E)=>void;onStalledCapture?:(event:E)=>void;onSuspend?:(event:E)=>void;onSuspendCapture?:(event:E)=>void;onTimeUpdate?:(event:E)=>void;onTimeUpdateCapture?:(event:E)=>void;onVolumeChange?:(event:E)=>void;onVolumeChangeCapture?:(event:E)=>void;onWaiting?:(event:E)=>void;onWaitingCapture?:(event:E)=>void;onAuxClick?:(event:E)=>void;onAuxClickCapture?:(event:E)=>void;onClick?:(event:E)=>void;onClickCapture?:(event:E)=>void;onContextMenu?:(event:E)=>void;onContextMenuCapture?:(event:E)=>void;onDoubleClick?:(event:E)=>void;onDoubleClickCapture?:(event:E)=>void;onDrag?:(event:E)=>void;onDragCapture?:(event:E)=>void;onDragEnd?:(event:E)=>void;onDragEndCapture?:(event:E)=>void;onDragEnter?:(event:E)=>void;onDragEnterCapture?:(event:E)=>void;onDragExit?:(event:E)=>void;onDragExitCapture?:(event:E)=>void;onDragLeave?:(event:E)=>void;onDragLeaveCapture?:(event:E)=>void;onDragOver?:(event:E)=>void;onDragOverCapture?:(event:E)=>void;onDragStart?:(event:E)=>void;onDragStartCapture?:(event:E)=>void;onDrop?:(event:E)=>void;onDropCapture?:(event:E)=>void;onMouseDown?:(event:E)=>void;onMouseDownCapture?:(event:E)=>void;onMouseEnter?:(event:E)=>void;onMouseLeave?:(event:E)=>void;onMouseMove?:(event:E)=>void;onMouseMoveCapture?:(event:E)=>void;onMouseOut?:(event:E)=>void;onMouseOutCapture?:(event:E)=>void;onMouseOver?:(event:E)=>void;onMouseOverCapture?:(event:E)=>void;onMouseUp?:(event:E)=>void;onMouseUpCapture?:(event:E)=>void;onSelect?:(event:E)=>void;onSelectCapture?:(event:E)=>void;onTouchCancel?:(event:E)=>void;onTouchCancelCapture?:(event:E)=>void;onTouchEnd?:(event:E)=>void;onTouchEndCapture?:(event:E)=>void;onTouchMove?:(event:E)=>void;onTouchMoveCapture?:(event:E)=>void;onTouchStart?:(event:E)=>void;onTouchStartCapture?:(event:E)=>void;onPointerDown?:(event:E)=>void;onPointerDownCapture?:(event:E)=>void;onPointerMove?:(event:E)=>void;onPointerMoveCapture?:(event:E)=>void;onPointerUp?:(event:E)=>void;onPointerUpCapture?:(event:E)=>void;onPointerCancel?:(event:E)=>void;onPointerCancelCapture?:(event:E)=>void;onPointerEnter?:(event:E)=>void;onPointerLeave?:(event:E)=>void;onPointerOver?:(event:E)=>void;onPointerOverCapture?:(event:E)=>void;onPointerOut?:(event:E)=>void;onPointerOutCapture?:(event:E)=>void;onGotPointerCapture?:(event:E)=>void;onGotPointerCaptureCapture?:(event:E)=>void;onLostPointerCapture?:(event:E)=>void;onLostPointerCaptureCapture?:(event:E)=>void;onScroll?:(event:E)=>void;onScrollCapture?:(event:E)=>void;onWheel?:(event:E)=>void;onWheelCapture?:(event:E)=>void;onAnimationStart?:(event:E)=>void;onAnimationStartCapture?:(event:E)=>void;onAnimationEnd?:(event:E)=>void;onAnimationEndCapture?:(event:E)=>void;onAnimationIteration?:(event:E)=>void;onAnimationIterationCapture?:(event:E)=>void;onToggle?:(event:E)=>void;onBeforeToggle?:(event:E)=>void;onTransitionCancel?:(event:E)=>void;onTransitionCancelCapture?:(event:E)=>void;onTransitionEnd?:(event:E)=>void;onTransitionEndCapture?:(event:E)=>void;onTransitionRun?:(event:E)=>void;onTransitionRunCapture?:(event:E)=>void;onTransitionStart?:(event:E)=>void;onTransitionStartCapture?:(event:E)=>void;defaultChecked?:boolean;defaultValue?:string|number|ReadonlyArray;suppressContentEditableWarning?:boolean;suppressHydrationWarning?:boolean;accessKey?:string;autoCapitalize?:off|none|on|sentences|words|characters|string;autoFocus?:boolean;contentEditable?:Booleanish|inherit|plaintext-only;contextMenu?:string;dir?:string;draggable?:true|false|boolean;enterKeyHint?:"enter"|"done"|"go"|"next"|"previous"|"search"|"send";hidden?:boolean;id?:string;lang?:string;nonce?:string;slot?:string;spellCheck?:true|false|boolean;tabIndex?:number;title?:string;translate?:"yes"|"no";radioGroup?:string;role?:term|none|string|search|alert|alertdialog|application|article|banner|button|cell|checkbox|columnheader|combobox|complementary|contentinfo|definition|dialog|directory|document|feed|figure|form|grid|gridcell|group|heading|img|link|list|listbox|listitem|log|main|marquee|math|menu|menubar|menuitem|menuitemcheckbox|menuitemradio|navigation|note|option|presentation|progressbar|radio|radiogroup|region|row|rowgroup|rowheader|scrollbar|searchbox|separator|slider|spinbutton|status|switch|tab|table|tablist|tabpanel|textbox|timer|toolbar|tooltip|tree|treegrid|treeitem;about?:string;content?:string;datatype?:string;inlist?:any;prefix?:string;property?:string;rel?:string;resource?:string;rev?:string;typeof?:string;vocab?:string;autoCorrect?:string;autoSave?:string;itemProp?:string;itemScope?:boolean;itemType?:string;itemID?:string;itemRef?:string;results?:number;security?:string;unselectable?:"off"|"on";popover?:""|"auto"|"manual";popoverTargetAction?:"toggle"|"show"|"hide";popoverTarget?:string;inert?:boolean;inputMode?:"text"|"url"|"none"|"search"|"tel"|"email"|"numeric"|"decimal";is?:string;form?:string;formAction?:string|(formData:FormData)=>void|Promise|unknown;formEncType?:string;formMethod?:string;formNoValidate?:boolean;formTarget?:string;name?:string;value?:string|ReadonlyArray|number;download?:any;hrefLang?:string;media?:string;ping?:string;target?:string|_self|_blank|_parent|_top;referrerPolicy?:""|"no-referrer"|"no-referrer-when-downgrade"|"origin"|"origin-when-cross-origin"|"same-origin"|"strict-origin"|"strict-origin-when-cross-origin"|"unsafe-url"}--
confirmLoadingWhether to apply loading visual effect for OK button or notboolean--
okTextText of the OK buttonReactNode--
mousePosition--|{x:number;y:number}--
maskTransitionName--string--
maskAnimation--any--
wrapStyle--{}--
bodyProps--any--
maskProps--any--
wrapProps--any--
modalRender--(node:React.ReactNode)=>|string|number|unknown|ReactElement|Iterable<ReactNode>|ReactPortal|Promise<AwaitedReactNode>|boolean--
cancelTextText of the Cancel buttonReactNode--
cancelButtonProps--{href?:string;htmlType?:"button"|"submit"|"reset";autoInsertSpace?:boolean;type?:"text"|"primary"|"link"|"default"|"dashed";color?:"primary"|"danger"|"default"|"blue"|"purple"|"cyan"|"green"|"magenta"|"pink"|"red"|"orange"|"yellow"|"volcano"|"geekblue"|"lime"|"gold";variant?:"text"|"link"|"dashed"|"outlined"|"solid"|"filled";icon?:ReactNode;iconPosition?:"start"|"end";shape?:"default"|"circle"|"round";size?:"small"|"middle"|"large";disabled?:boolean;loading?:boolean|{delay?:number;icon?:ReactNode};prefixCls?:string;className?:string;rootClassName?:string;ghost?:boolean;danger?:boolean;block?:boolean;children?:ReactNode;classNames?:object;styles?:object;style?:object;dangerouslySetInnerHTML?:object;onCopy?:(event:E)=>void;onCopyCapture?:(event:E)=>void;onCut?:(event:E)=>void;onCutCapture?:(event:E)=>void;onPaste?:(event:E)=>void;onPasteCapture?:(event:E)=>void;onCompositionEnd?:(event:E)=>void;onCompositionEndCapture?:(event:E)=>void;onCompositionStart?:(event:E)=>void;onCompositionStartCapture?:(event:E)=>void;onCompositionUpdate?:(event:E)=>void;onCompositionUpdateCapture?:(event:E)=>void;onFocus?:(event:E)=>void;onFocusCapture?:(event:E)=>void;onBlur?:(event:E)=>void;onBlurCapture?:(event:E)=>void;onChange?:(event:E)=>void;onChangeCapture?:(event:E)=>void;onBeforeInput?:(event:E)=>void;onBeforeInputCapture?:(event:E)=>void;onInput?:(event:E)=>void;onInputCapture?:(event:E)=>void;onReset?:(event:E)=>void;onResetCapture?:(event:E)=>void;onSubmit?:(event:E)=>void;onSubmitCapture?:(event:E)=>void;onInvalid?:(event:E)=>void;onInvalidCapture?:(event:E)=>void;onLoad?:(event:E)=>void;onLoadCapture?:(event:E)=>void;onError?:(event:E)=>void;onErrorCapture?:(event:E)=>void;onKeyDown?:(event:E)=>void;onKeyDownCapture?:(event:E)=>void;onKeyPress?:(event:E)=>void;onKeyPressCapture?:(event:E)=>void;onKeyUp?:(event:E)=>void;onKeyUpCapture?:(event:E)=>void;onAbort?:(event:E)=>void;onAbortCapture?:(event:E)=>void;onCanPlay?:(event:E)=>void;onCanPlayCapture?:(event:E)=>void;onCanPlayThrough?:(event:E)=>void;onCanPlayThroughCapture?:(event:E)=>void;onDurationChange?:(event:E)=>void;onDurationChangeCapture?:(event:E)=>void;onEmptied?:(event:E)=>void;onEmptiedCapture?:(event:E)=>void;onEncrypted?:(event:E)=>void;onEncryptedCapture?:(event:E)=>void;onEnded?:(event:E)=>void;onEndedCapture?:(event:E)=>void;onLoadedData?:(event:E)=>void;onLoadedDataCapture?:(event:E)=>void;onLoadedMetadata?:(event:E)=>void;onLoadedMetadataCapture?:(event:E)=>void;onLoadStart?:(event:E)=>void;onLoadStartCapture?:(event:E)=>void;onPause?:(event:E)=>void;onPauseCapture?:(event:E)=>void;onPlay?:(event:E)=>void;onPlayCapture?:(event:E)=>void;onPlaying?:(event:E)=>void;onPlayingCapture?:(event:E)=>void;onProgress?:(event:E)=>void;onProgressCapture?:(event:E)=>void;onRateChange?:(event:E)=>void;onRateChangeCapture?:(event:E)=>void;onResize?:(event:E)=>void;onResizeCapture?:(event:E)=>void;onSeeked?:(event:E)=>void;onSeekedCapture?:(event:E)=>void;onSeeking?:(event:E)=>void;onSeekingCapture?:(event:E)=>void;onStalled?:(event:E)=>void;onStalledCapture?:(event:E)=>void;onSuspend?:(event:E)=>void;onSuspendCapture?:(event:E)=>void;onTimeUpdate?:(event:E)=>void;onTimeUpdateCapture?:(event:E)=>void;onVolumeChange?:(event:E)=>void;onVolumeChangeCapture?:(event:E)=>void;onWaiting?:(event:E)=>void;onWaitingCapture?:(event:E)=>void;onAuxClick?:(event:E)=>void;onAuxClickCapture?:(event:E)=>void;onClick?:(event:E)=>void;onClickCapture?:(event:E)=>void;onContextMenu?:(event:E)=>void;onContextMenuCapture?:(event:E)=>void;onDoubleClick?:(event:E)=>void;onDoubleClickCapture?:(event:E)=>void;onDrag?:(event:E)=>void;onDragCapture?:(event:E)=>void;onDragEnd?:(event:E)=>void;onDragEndCapture?:(event:E)=>void;onDragEnter?:(event:E)=>void;onDragEnterCapture?:(event:E)=>void;onDragExit?:(event:E)=>void;onDragExitCapture?:(event:E)=>void;onDragLeave?:(event:E)=>void;onDragLeaveCapture?:(event:E)=>void;onDragOver?:(event:E)=>void;onDragOverCapture?:(event:E)=>void;onDragStart?:(event:E)=>void;onDragStartCapture?:(event:E)=>void;onDrop?:(event:E)=>void;onDropCapture?:(event:E)=>void;onMouseDown?:(event:E)=>void;onMouseDownCapture?:(event:E)=>void;onMouseEnter?:(event:E)=>void;onMouseLeave?:(event:E)=>void;onMouseMove?:(event:E)=>void;onMouseMoveCapture?:(event:E)=>void;onMouseOut?:(event:E)=>void;onMouseOutCapture?:(event:E)=>void;onMouseOver?:(event:E)=>void;onMouseOverCapture?:(event:E)=>void;onMouseUp?:(event:E)=>void;onMouseUpCapture?:(event:E)=>void;onSelect?:(event:E)=>void;onSelectCapture?:(event:E)=>void;onTouchCancel?:(event:E)=>void;onTouchCancelCapture?:(event:E)=>void;onTouchEnd?:(event:E)=>void;onTouchEndCapture?:(event:E)=>void;onTouchMove?:(event:E)=>void;onTouchMoveCapture?:(event:E)=>void;onTouchStart?:(event:E)=>void;onTouchStartCapture?:(event:E)=>void;onPointerDown?:(event:E)=>void;onPointerDownCapture?:(event:E)=>void;onPointerMove?:(event:E)=>void;onPointerMoveCapture?:(event:E)=>void;onPointerUp?:(event:E)=>void;onPointerUpCapture?:(event:E)=>void;onPointerCancel?:(event:E)=>void;onPointerCancelCapture?:(event:E)=>void;onPointerEnter?:(event:E)=>void;onPointerLeave?:(event:E)=>void;onPointerOver?:(event:E)=>void;onPointerOverCapture?:(event:E)=>void;onPointerOut?:(event:E)=>void;onPointerOutCapture?:(event:E)=>void;onGotPointerCapture?:(event:E)=>void;onGotPointerCaptureCapture?:(event:E)=>void;onLostPointerCapture?:(event:E)=>void;onLostPointerCaptureCapture?:(event:E)=>void;onScroll?:(event:E)=>void;onScrollCapture?:(event:E)=>void;onWheel?:(event:E)=>void;onWheelCapture?:(event:E)=>void;onAnimationStart?:(event:E)=>void;onAnimationStartCapture?:(event:E)=>void;onAnimationEnd?:(event:E)=>void;onAnimationEndCapture?:(event:E)=>void;onAnimationIteration?:(event:E)=>void;onAnimationIterationCapture?:(event:E)=>void;onToggle?:(event:E)=>void;onBeforeToggle?:(event:E)=>void;onTransitionCancel?:(event:E)=>void;onTransitionCancelCapture?:(event:E)=>void;onTransitionEnd?:(event:E)=>void;onTransitionEndCapture?:(event:E)=>void;onTransitionRun?:(event:E)=>void;onTransitionRunCapture?:(event:E)=>void;onTransitionStart?:(event:E)=>void;onTransitionStartCapture?:(event:E)=>void;defaultChecked?:boolean;defaultValue?:string|number|ReadonlyArray;suppressContentEditableWarning?:boolean;suppressHydrationWarning?:boolean;accessKey?:string;autoCapitalize?:off|none|on|sentences|words|characters|string;autoFocus?:boolean;contentEditable?:Booleanish|inherit|plaintext-only;contextMenu?:string;dir?:string;draggable?:true|false|boolean;enterKeyHint?:"enter"|"done"|"go"|"next"|"previous"|"search"|"send";hidden?:boolean;id?:string;lang?:string;nonce?:string;slot?:string;spellCheck?:true|false|boolean;tabIndex?:number;title?:string;translate?:"yes"|"no";radioGroup?:string;role?:term|none|string|search|alert|alertdialog|application|article|banner|button|cell|checkbox|columnheader|combobox|complementary|contentinfo|definition|dialog|directory|document|feed|figure|form|grid|gridcell|group|heading|img|link|list|listbox|listitem|log|main|marquee|math|menu|menubar|menuitem|menuitemcheckbox|menuitemradio|navigation|note|option|presentation|progressbar|radio|radiogroup|region|row|rowgroup|rowheader|scrollbar|searchbox|separator|slider|spinbutton|status|switch|tab|table|tablist|tabpanel|textbox|timer|toolbar|tooltip|tree|treegrid|treeitem;about?:string;content?:string;datatype?:string;inlist?:any;prefix?:string;property?:string;rel?:string;resource?:string;rev?:string;typeof?:string;vocab?:string;autoCorrect?:string;autoSave?:string;itemProp?:string;itemScope?:boolean;itemType?:string;itemID?:string;itemRef?:string;results?:number;security?:string;unselectable?:"off"|"on";popover?:""|"auto"|"manual";popoverTargetAction?:"toggle"|"show"|"hide";popoverTarget?:string;inert?:boolean;inputMode?:"text"|"url"|"none"|"search"|"tel"|"email"|"numeric"|"decimal";is?:string;form?:string;formAction?:string|(formData:FormData)=>void|Promise|unknown;formEncType?:string;formMethod?:string;formNoValidate?:boolean;formTarget?:string;name?:string;value?:string|ReadonlyArray|number;download?:any;hrefLang?:string;media?:string;ping?:string;target?:string|_self|_blank|_parent|_top;referrerPolicy?:""|"no-referrer"|"no-referrer-when-downgrade"|"origin"|"origin-when-cross-origin"|"same-origin"|"strict-origin"|"strict-origin-when-cross-origin"|"unsafe-url"}--
allowFullscreen--boolean--
enableResponsive--boolean--
maxHeight--string|number|--
paddings--{desktop?:number;mobile?:number}--