Layout

Overlay Modals

An overlay modal is a traditional modal that overlays all other content on a page. Its position is fixed relative to the browser window. It sits on top of a transparent dark background that helps the modal become the primary focus point. By default, users can click outside the modal (on the modal background) to close it. If the modal requires the user to take an action (such as clicking on the primary action button), the user will not be able to click outside the modal to close it.

Usage

1. Confirm user action
2. Put important information into focus
3. Require the user to make a choice before proceeding
4. Allow the user to edit simple forms without leaving the page

<div class="adb-modal" id="modal-medium" role="menu">
  <h3 class="adb-modal--header" data-truncate>
    quia consequuntur magni dolores eos
    <a class="adb-close" data-dismiss="modal" href="#" title="Close"></a>
  </h3>
  <div class="adb-modal--content">
    <p>
      Qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore
    </p>
  </div>
  <menu class="adb-modal--footer adb-toolbar">
    <button class="adb-toolbar--item adb-button__primary" type="submit">
      Take Action
    </button>
    <button class="adb-toolbar--item adb-button__secret" data-dismiss="modal" type="button">
      Cancel
    </button>
  </menu>
</div>