Skip to contentSkip to footer
Brown meerkat photo

Photo: Rachel Hannah Photo

Modal

Introduction

Present actionable content to visitors with dismissable modal dialog overlays.

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.

HTML
  <!-- Modal button -->


  <button
    class="button"
    data-modal="open"
    aria-controls="modal-example-01"
    type="button"
  >
    Open Modal
  </button>


<!-- Modal dialog -->


<div
  class="modal"
  id="modal-example-01"
  aria-hidden="true"
>
  <div
    class="modal__content narrow border-radius-2 box-shadow-3"
    aria-labelledby="modal-example-01-title"
    role="dialog"
    aria-modal="true"
  >
    <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 type="button">
        <span class="icon icon-close" aria-hidden="true"></span>
      </button>
    </header>


    <main class="modal__content__body" id="modal-example-01-content">
      <p>...</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 border-radius-pill" href="#1">Primary Action</a>
        </li>
      </ul>
    </footer>


  </div>


</div>
Figure 1
Figure 1 notes
LinesDetails
3-10

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

The aria-controls attribute equals its associated modal’s id attribute.

14-18

The .modal selector is required.

The id attribute equals the value of its associated button’s aria-controls attribute.

19-24

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-2 utility is optional.

The .box-shadow-3 utility is optional.

Use role="dialog", aria-modal="true", and aria-labelledby so assistive technology treats the content as a named modal dialog.

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

25-32

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.

34-36

The .modal__content__body selector is required.

It holds the modal’s main content.

38-47

The .modal__content__foot selector is not required.

It 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).

HTML
<div class="modal modal--scroll-all" id="...">
  ...
</div>
Figure 2

Close Outside

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

HTML
<div class="modal" id="..." data-modal-close-outside="true">
...
</div>
Figure 3

Lightbox

Accessibility