Modal
The Modal component lets you show important, additional content in an overlay.
The overlay is always centered on the page and covers the on-screen content until the user closes it.
The Modal must have a trigger that controls the open status of the modal. The
useOverlayWithTrigger hook provides the corresponding props.
It's also essential to add at least one focusable element inside the Modal so
that it's keyboard accessible. If no focusable element is available, the focus
will be given to the document when opening the modal.
Import
import { Modal } from '@dynatrace/strato-components-preview/overlays';
Use Cases
Control size of modal
Use the size prop of the modal to change its size. The default value is
medium.
Control dismissible state of modal
Allows you to control the dismissible state of your modal.
Nest modals
You can place different content or additional modals inside a modal. If a modal within the modal (a nested modal) is triggered, the focus is switched to the nested modal and the first modal loses focus and is treated like a background element.
Handle the focus if the trigger is removed when opening
If you're using a trigger that is removed from the DOM when the modal is opened,
you have to take care of some parts of the focus handling to ensure that proper
keyboard navigation is still possible. When the trigger is removed, you may have
to prevent the trigger from moving the focus away from the modal and move it
back to an element on your page after dismissing the modal. Check out the
following example to see how this could work when using a Menu.Item as trigger
for the modal.