When a modal is active, you should notice the following:
document.bodyinstead of its taking up its source-order position within the React component tree.
focusDialog=true, so the focus trap still works but no focus outline is initially visible
escapeExits=falseso the Escape key does not close the modal.
aria-attributes to the modal container
This modal's active/inactive state is controlled with the
mounted prop instead of
mounting and unmounting.
This modal uses some custom classes and special
onExit functions to enable nice transitions.
This modal renders into a specified element instead of into a new one at the bottom of
<body>, uses the
underlayStyle prop to customize the underlay, and
underlayProps to pass additional attributes.
This modal renders with no default styles via
includeDefaultStyles=false, allowing complete
presentational control without `underlayStyle` or `dialogStyle` overrides.
Demo includes styles to allow for an auto-overflowing modal with a
This modal has a focus trap inside it, so must pause the modal's focus trap.
This modal has doesn't prevent the scrolling of the content behind the modal.
This modal will not return focus to the element that was focused just before the modal activated.
☜ Return to the repository