Photo by Rachel Hannah Photo  on Unsplash

Modal

Present actionable content to visitors with dismissable modal dialog overlays.

Accessibility Spotlight

Modals have keyboard support for focusable elements. Use the Tab and Shift + Tab keys without leaving the model by accident. Using the Esc key closes the model.

When a modal closes, keyboard user return to the last active element in the document.

Include role="dialog" on the modal element.

Provide an accessible name with aria-describedby, referring to the modal title element.


Default Behavior

Use the button below to launch the modal component with default behavior. Modals center horizontally and vertically. Content within the .modal__content__body selector scrolls (vertically) when its content's height exceeds the height of the viewport.

<!-- Modal button -->

<button
    class="button theme-primary"
    data-modal-open="modal-example-01">
        Open Modal
</button>

<!-- Modal dialog -->

<div class="modal padding-2" id="modal-example-01" role="dialog">

    <div
        class="modal__content narrow border-radius box-shadow-3"
        aria-labelledby="modal-example-01-title">

        <header class="modal__content__head border-bottom">
            <h2 class="h6" id="modal-example-01-title">
                Modal Title One
            </h2>
            <button class="button button--icon-only" data-modal-close>
                <span class="icon icon-close" aria-hidden="true"></span>
            </button>
        </header>

        <main class="modal__content__body" id="modal-example-01-content">
            <p>
                The <strong>meerkat</strong> (Suricata suricatta) or suricate is a small <a href="#1">mongoose</a> found in southern Africa. It is characterised by a broad head, large eyes, a pointed snout, long legs, a thin tapering tail, and a brindled coat pattern. The head-and-body length is around 24–35 cm (9.4–13.8 in), and the weight is typically between 0.62 and 0.97 kg (1.4 and 2.1 lb). The coat is light grey to yellowish brown with alternate, poorly defined light and dark bands on the back. Meerkats have foreclaws adapted for digging and have the ability to thermoregulate to survive in their harsh, dry habitat. Three subspecies are recognised.
            </p>
        </main>

        <footer class="modal__content__foot border-top text-color-link">
            <ul class="nav nav--horizontal justify-content-between">
                <li>
                    <a href="#1">Secondary Action</a>
                </li>
                <li>
                    <a class="button rounded-pill" href="#1">Primary Action</a>
                </li>
            </ul>
        </footer>

    </div>

</div>
Figure 1
Line #Details
3-7

A button with the data-modal-open attribute is required.

The data-modal-open attribute equals its associated modal's id attribute.

11

The .modal selector is required.

The id attribute equals the value of its associated button's data-modal-open attribute.

The role="dialog" attribute is present for for assistive technology.

13-15

The .modal__content selector is required.

It centers the modal and holds the modal's header, body, and footer selectors.

The .narrow utility is optional. It sets the width of the modal.

The .border-radius utility is optional.

The .box-shadow-3 utility is optional.

The aria-labelledby attribute is recommended for assistive technology.

The aria-labelledby attribute equals its associated header's id attribute. This header is present within .modal__content__head.

17-24

The .modal__content__head selector is required.

It holds the modal's header and close icon button.

The .border-bottom utility is optional.

The .button selector with the data-modal-close attribute closes the modal.

26-30

The .modal__content__body selector is required.

It holds the modal's main content.

32-41

The .card__foot selector is not required.

It selector holds the modal's actionable buttons and links.

The .border-top utility class is not required.


Scroll Entire Modal

If you wish for the entire modal to scroll, add the .modal--scroll-all modifier class to the .modal selector (Figure, 2, line 1).

<div class="modal modal--scroll-all" id="..." role="dialog">

    ...
</div>
Figure 2

Close Outside

With the data-modal-close-outside="true" attribute preset, the modal closes when the user clicks outside of the modal content (Figure 3, line 1).

<div class="modal" id="..." data-modal-close-outside="true" role="dialog">

    ...
</div>
Figure 3

Both menus use the same markup but include a different modifier on their parent selector.

In particular, .primary-nav--below--{x} places the menu below the logo. In contrast, .primary-nav--inline--{x} places the menu inline with the logo. Here, x equals its breakpoint modifier (e.g., lg for large). At this point the component changes layout from mobile to desktop.

Figure 1 (below) provides the entire HTML for the primary navigation component.

Related CSS Variables

Further customize Modal by redefining any of their related CSS variables as shown below.

.modal {
    --modal-padding-x: var(--spacer-2);
    --modal-padding-y: var(--spacer-2);
    --modal-overlay-opacity: 0.8;
    --modal-z-index: 8000;
}