Modals

Modals are overlaying patterns and will intentionally obscure information behind it as such they can be disruptive. Modals require action before the user can continue interacting with the rest of UserTesting.

Fancybox and Bootstrap

We have two third party plugins for modals: Fancybox and Bootstrap. Please use the Bootstrap method for modals. Fancybox should be used when you do not have access to angular but should be avoided in most cases. Both libraries auto-generate wrapper classes for the modal content. Note: All modals have a wrapper class of modal. This is intentionally left off of the example (otherwise it wouldn’t be visible 😜).

Bootstrap example

Apply wrapCSS to the modal trigger.

openModal() {
  this.Modal.open({
    templateUrl: 'my_modal.html',
    controller: MyController,
    windowClass: 'modal--small'
  )}
}

Basic

<div class="modal">
  <div class="modal modal-dialog">
    <div class="modal-content">

      <!-- our markup begins here -->
      <header class="modal__header">
          Diagon Alley (HTML)
      </header>
      <div class="modal-body">
        <p>Receive 20% off when shopping at the Leaky Cauldron!</p>
      </div>

      <footer class="modal__footer">
        <div class="modal-btn-group">
          <button type="button" class="btn--tertiary mr-2x">Close</button>
          <button class="btn--primary">OK</button>
        </div>
      </footer>
      <!-- end -->

    </div>
  </div>
</div>

Description

Multi-action modals have two buttons a primary and a secondary. The primary action should confirm or navigate a customer from the modal. The secondary action should allow the customer to dismiss the modal. The primary action should be on the right and the secondary action should be on the left.

Close Modal

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- our markup begins here -->
      <header class="modal__header">
        <h2>Gringotts Wizarding Bank<h2>
      </header>
      <div class="modal-body">
        <p>Be advised the Bank will be closed on Sundays for dragon cleaning.</p>
      </div>

      <footer class="modal__footer">
        <div class="modal-btn-group">
          <button type="button" class="btn--tertiary">Close</button>
        </div>
      </footer>
      <!-- end -->

    </div>
  </div>
</div>

Description

This pattern has a single action to dismiss the modal. It should use the secondary action.

Small Modal

<div class="modal modal--small">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- our markup begins here -->
      <header class="modal__header">
        <h2>Small modal</h2>
      </header>
      <div class="modal-body">
        <p>This is the text inside the modal body.</p>
      </div>

      <footer class="modal__footer">
        <div class="modal-btn-group">
          <button type="button" class="btn--tertiary">Close</button>
        </div>
      </footer>
      <!-- end -->

    </div>
  </div>
</div>

Description

This pattern has a single action to dismiss the modal. It should use the secondary action.

Medium Modal

<div class="modal modal--med">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- our markup begins here -->
      <header class="modal__header">
        <h2>Medium modal</h2>
      </header>
      <div class="modal-body">
        <p>This is the text inside the modal body.</p>
      </div>

      <footer class="modal__footer">
        <div class="modal-btn-group">
          <button type="button" class="btn--tertiary">Close</button>
        </div>
      </footer>
      <!-- end -->

    </div>
  </div>
</div>

Large Modal

<div class="modal modal--large">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- our markup begins here -->
      <header class="modal__header">
        <h2>Large modal<h2>
      </header>
      <div class="modal-body">
        <p>This is the text inside the modal body.</p>
      </div>

      <footer class="modal__footer">
        <div class="modal-btn-group">
          <button type="button" class="btn--tertiary">Close</button>
        </div>
      </footer>
      <!-- end -->

    </div>
  </div>
</div>

Scroll Modal

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- our markup begins here -->
      <header class="modal__header">
        <h2>Chapter One - The Boy Who Lived</h2>
      </header>

      <div class="modal-body modal-body--scroll">
        <p class="t-base">Mr. and Mrs. Dursley, of number four, Privet Drive, were proud to say that they were perfectly normal, thank you very much. They were the last people you'd expect to be involved in anything strange or mysterious, because they just didn't hold with such nonsense. Mr. Dursley was the director of a firm called Grunnings, which made drills. He was a big, beefy man with hardly any neck, although he did have a very large mustache. Mrs. Dursley was thin and blonde and had nearly twice the usual amount of neck, which came in very useful as she spent so much of her time craning over garden fences, spying on the neighbors. The Dursleys had a small son called Dudley and in their opinion there was no finer boy anywhere.</p>
        <p class="t-base">The Dursleys had everything they wanted, but they also had a secret, and their greatest fear was that somebody would discover it. They didn't think they could bear it if anyone found out about the Potters. Mrs. Potter was Mrs. Dursley's sister, but they hadn't met for several years; in fact, Mrs. Dursley pretended she didn't have a sister, because her sister and her good-for-nothing husband were as unDursleyish as it was possible to be. The Dursleys shuddered to think what the neighbors would say if the Potters arrived in the street. The Dursleys knew that the Potters had a small son, too, but they had never even seen him. This boy was another good reason for keeping the Potters away; they didn't want Dudley mixing with a child like that. </p>
      </div>

      <footer class="modal__footer">
        <div class="modal-btn-group">
          <button type="button" class="btn--tertiary">Close</button>
        </div>
      </footer>
      <!-- end -->

    </div>
  </div>
</div>

Description

Modals can contain a wide range of information as such there may be a situation where the information extends past the height of the modal. Utilizing the scroll class will keep the content within the confines of the modal.

Do

  • Provide clear titles and headings in modals
  • Please use discretion when applying this pattern as it may be overwhelming to a user

Don't

  • Include an x in the top right of the modal

Accessibility

  • Does receive :focus when opened
  • Action-launching modal should have aria-haspopup="true"