xl vision
  • Component
  • React Hooks
  • Playground
  • Overview
  • Color
  • Getting Start
    • Installation
  • General
    • Icon
    • Button
  • Layout
    • Grid
  • Form
    • Input
    • InputNumber
    • Textarea
  • Navigation
    • Dropdown
    • Affix
    • BackTop
    • Anchor
  • Data Display
    • Tooltip
    • Popover
    • Avatar
  • Faceback
    • Popconfirm
    • Dialog
    • Message
    • Notication
  • Animation
    • Transition
    • TransitionGroup
    • CollapseTransition
    • Ripple
  • Styles
    • Theme
    • CssBaseline
  • Basic Component
    • BaseButton
    • Portal
    • Popper
    • Modal
    • ResizeObserver

Modal

Base modal

Examples

Basic

Basic

Nest

Nest.

Disable mask close

Disable close modal when click mask layer.

Hide mask

Hide mask.

Disable esc close

Disable close modal when press key esc.

Shortcut

Support the focus of the internal Popper element. Note that the Popper is actually hung on the body, but the Tab key can work as expected.

Properties

PropertyDescriptionTypeDefaultRequire
containerSpecify the parent container of the modalstring | HTMLElement | (() => string | HTMLElement)-false
defaultOpenWhether the default modal is displayed, when open exists, the option is invalidbooleanfalsefalse
onOpenChangeCallback when the status of the modal changes(open: boolean) => void-false
openWhether to show modalboolean-false
unmountOnHideDestroy dom when close modalboolean-false
mountOnShowMount dom when open modalbooleantruefalse
maskWhether show modal layerbooleantruefalse
maskClosableWhether close modal when click mask layerbooleantruefalse
escClosableWhether close modal when press key escbooleantruefalse
wrapperClassNameModal wrapper classNamestring-false
onAfterClosedThe hook when modal closed. At this time, modal animation ends too() => void-false
Examples
Basic
Nest
Disable mask close
Hide mask
Disable esc close
Shortcut
Properties
Copyright © 2020-2021 Rhys Xia