An overlay that contains content and covers the page
ModalCurtain component makes it easy to create an accessible overlay that contains content and covers the page. It contains a few powerful features:
children. Trap the focus within the
ModalCurtainwhile it is open, preventing users from accidentally tabbing to the page underneath.
</body>tag. This greatly decreases the chance of running into z-index issues.
ModalCurtainif the user presses Esc.
ModalCurtainclick: Make it easy to close the modal if the
ModalCurtainis clicked on.
ModalCurtain component CSS handles positioning, overflow, z-index, visibility, and opacity. It does not include background colors, padding, transitions, or other opinionated styles since the component was designed to be versatile.
ModalCurtainwith a basic modal
This example contains a
ModalCurtain with a basic modal and no transition. Because there is no transition, the
stage prop only cycles between
ModalCurtainwith a full screen takeover
ModalCurtain component works well for full-screen takeovers. This example doesn’t use
curtainOnClick since we don’t want to close the curtain when clicking on the backdrop.
Function that fires to close the modal.
Content that appears on top of the curtain.
children is a render
prop and expects a function. The function
provided receives an object two properties:
curtainClassName: Handles positioning, z-index, opacity, overflow, and visibility. Should be added to the
classNameof the outermost element within the
curtainOnClick: You can optionally add this prop to the
onClickof an element within
children. This is typically used on to close a ModalCurtain when clicking on a dark backdrop.
The examples on this page include code samples that demonstrate real use of these props.
The four states that a modal can be in.
exited– Modal is fully closed
entering– Modal is opening
entered– Modal has fully open
exiting– Modal is closing
Modals that do not have transitions will only use the
oneOf([ 'entering', 'entered', 'exiting', 'exited', ])
Accessibility title used to describe the content of the modal to screen readers.
Determines if the modal should close when pressing the escape key.