Modal

Overview

A modal is lightbox-style pop up that overlays the content below it, with a dimmed background. Users have to interact with or close them before they can return to the main window. There are 3 types of modal styles: modals without journey line, modals with buttons and 2 column modals.

Usage

Modals can be used when there are important steps the user needs to do before a task is to be completed. Using a modal window instead of a full page allows users to focus on the immediate step at hand, while maintaining the context of their main task. Modals can also be used to provide additional information when you don't want the user to navigate away from the current page they are viewing.

Accessibility

Currently, the modal in the pattern library has the styling but does not provide the javascript interactions. That means the interaction has to be built within whatever JS framework the project uses. Here are some important interaction considerations that the modal must adhere to:



Usage

Modal without journey line is used when delivering a small amount of information.

Style

The modal contains a white background with a headline and body copy. The close button is always placed on the top right corner. Theere is an active area that contains the content.

Modal without journey line

Heading 5 sentence goes here. Lorem ipsum dolor sit amet, consectr adipiscing elit

Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
<div class="am-modal" id="modalExample1">
  <div class="am-modal__close-container"></div>
  <div class="am-modal__content" id="modalExample1__content">
    <button class="am-icon-button am-icon-button--secondary am-modal__close-button" onclick="hideModals()">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
    <h1 class="am-modal__heading">
      Modal without journey line
    </h1>
    <h3 class="am-modal__subheading">
      Heading 5 sentence goes here. Lorem ipsum dolor sit amet, consectr adipiscing elit
    </h3>
    <div class="am-modal__body">
      Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
    </div>
  </div>
</div>

Usage

Modal with journey line is used when the information has a clear title with supporting content below.

Style

The modal contains a white background with a headline and body copy. The close button is always placed on the top right corner with an active area containing content.

Modal with journey line

Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
<div class="am-modal" id="modalExample2">
  <div class="am-modal__close-container"></div>
  <div class="am-modal__content" id="modalExample2__content">
    <button class="am-icon-button am-icon-button--secondary am-modal__close-button" onclick="hideModals()">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
    <h1 class="am-modal__heading">
      Modal with journey line
    </h1>
    <div class="am-modal__journey">
      <div class="am-modal__journey-body">
        Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
      </div>
    </div>
  </div>
</div>

Usage

Modals with buttons are used when you are requesting users to take an action (i.e., filling in a form) in order to proceed.

Modal with buttons

Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
<div class="am-modal" id="modalExample3">
  <div class="am-modal__close-container"></div>
  <div class="am-modal__content" id="modalExample3__content">
    <button class="am-icon-button am-icon-button--secondary am-modal__close-button" onclick="hideModals()">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
    <h1 class="am-modal__heading">
      Modal with buttons
    </h1>
    <div class="am-modal__journey">
      <div class="am-modal__journey-body">
        Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
      </div>
      <div class="am-modal__button-container">
        <button class="am-button am-button--primary am-pull--left">
          <span class="am-modal__left-button-label-mobile">Save</span>
          <span class="am-modal__left-button-label-desktop">Save & Continue</span>
        </button>
        <button class="am-button am-button--link am-pull--right">Cancel</button>
      </div>
    </div>
  </div>
</div>

Usage

If required, modals can also feature two colums of content or active areas.

Modal 2-column

Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
<div class="am-modal" id="modalExample4">
  <div class="am-modal__close-container"></div>
  <div class="am-modal__content" id="modalExample4__content">
    <button class="am-icon-button am-icon-button--secondary am-modal__close-button" onclick="hideModals()">
      <span class="am-icon am-icon-functional-secondary-close"></span>
    </button>
    <h1 class="am-modal__heading">
      Modal 2-column
    </h1>
    <div class="am-modal__journey">
      <div class="am-modal__column-container">
        <div class="am-modal__column">
          Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
        </div>
        <div class="am-modal__column">
          Lorem ipsum dolor sit amet, tempor pellentesque vestibulum nulla, ullamcorper nibh leo tempus leo, dignissim neque massa suscipit, tortor sit ullamcorper. Amet ornare lorem. Sed blandit quisque lorem, aliquam tempor enim pulvinar. Ac magna, per eu vehicula diam. Posuere natoque justo, nonummy ultricies.
        </div>
      </div>
    </div>
  </div>
</div>