Photo by Rachel Hannah Photo
Modal
Introduction
Present actionable content to visitors with dismissable modal dialog overlays.
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-2 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>
| Line # | Details |
|---|---|
| 3-7 | A button with the The |
| 11 | The The The |
| 13-15 | The It centers the modal and holds the modal's header, body, and footer selectors. The The The The The aria-labelledby attribute equals its associated header's |
| 17-24 | The It holds the modal's header and close icon button. The The |
| 26-30 | The It holds the modal's main content. |
| 32-41 | The It selector holds the modal's actionable buttons and links. The |
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>
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>