Photo by Rachel Hannah Photo on Unsplash
Modal
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.
Suricata Suricatta
The meerkat (Suricata suricatta) or suricate is a small mongoose 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.
<!-- 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>| 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).
Suricata Suricatta
The meerkat (Suricata suricatta) or suricate is a small mongoose 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.
Meerkats are eusocial, and form packs of two to 30 individuals each that occupy home ranges around 5 km2 (1.9 sq mi) in area. There is a social hierarchy—generally dominant individuals in a pack breed and produce offspring, and the nonbreeding, subordinate members provide altruistic care to the pups. Breeding occurs round the year, with peaks during heavy rainfall; after a gestation of 60 to 70 days a litter of three to seven pups is born.
They live in rock crevices in stony, often calcareous areas, and in large burrow systems in plains. The burrow systems, typically 5 m (16 ft) in diameter with around 15 openings, are large underground networks consisting of two to three levels of tunnels. These tunnels are around 7.5 cm (3.0 in) high at the top and wider below, and extend up to 1.5 m (4.9 ft) into the ground. Burrows have moderated internal temperatures and provide a comfortable microclimate that protects meerkats in harsh weather and at extreme temperatures.
Meerkats are active during the day, mostly in the early morning and late afternoon; they remain continually alert and retreat to burrows (or 'boltholes') on sensing danger. They use a broad variety of calls to communicate among one another for different purposes, for example to raise alarm on sighting a predator. Primarily insectivorous, meerkats feed heavily on beetles and lepidopterans, though they also include amphibians, arthropods, small birds, reptiles, and plant material in their diet.
Commonly found in arid, open habitats with little woody vegetation, meerkats occur in southwestern Botswana, western and southern Namibia, northern and western South Africa; the range barely extends into southwestern Angola. With no significant threats to the populations, the meerkat is listed as Least Concern on the IUCN Red List. Meerkats are widely depicted in television, movies and other media.
<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).
Suricata Suricatta
The meerkat (Suricata suricatta) or suricate is a small mongoose 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.
<div class="modal" id="..." data-modal-close-outside="true" role="dialog">
...
</div>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;
}