Skip to main content

    Modal

    The Modal component lets you show important, additional content in an overlay.

    OverviewProperties

    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​

    CodeSandbox

    Control size of modal​

    Use the size prop of the modal to change its size. The default value is medium.

    CodeSandbox

    Control dismissible state of modal​

    Allows you to control the dismissible state of your modal.

    CodeSandbox

    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.

    CodeSandbox

    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.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community