Modal

Display layered view above the surface of entire page.

Preview

Gain focus on a specific feature, such as completing a subtask or providing complementary information without losing the context of the page’s initial state.

Modal screen: Fullscreen variant — Fullscreen

Behavior

A Modal will take over focus, restricting access to other areas of the application until a user completes a task or dismisses the modal.

Refer to JavaScript Guidance for additional behaviorial.

Trigger sample Modals:

Variants

Modals are styled with class="fsa-modal [fsa-modal--[VARIANT]]".

Default

<div tabindex="0" id="UNIQUE-ID-GGFD36765SSSGH" class="fsa-modal" role="dialog" aria-hidden="true">
  <div class="fsa-modal__dialog">
    <div class="fsa-modal__content">
      <button class="fsa-modal__close" data-behavior="close-modal" title="Close Modal" aria-label="Close Modal" type="button"></button>
      <h1 class="fsa-modal__title">[default title]</h1>
      <p>Eos reiciendis expedita esse, maiores nesciunt ratione dolore libero porro quas. Rerum atque fugiat esse, tenetur debitis reiciendis commodi et ut nulla?</p>
      <ul>
        <li><a href="/link.html">Fake Link</a></li>
        <li><a href="/link.html">Fake Link</a></li>
      </ul>
      <p>Odio aspernatur quo voluptatum dolorem obcaecati? Ipsum aliquid quae perspiciatis repudiandae nam magnam commodi cumque omnis!</p>
    </div>
  </div>
</div>

Small

<div tabindex="0" id="UNIQUE-ID-23458CF9J99DIS" class="fsa-modal fsa-modal--small" role="dialog" aria-hidden="true">
  <div class="fsa-modal__dialog">
    <div class="fsa-modal__content">
      <button class="fsa-modal__close" data-behavior="close-modal" title="Close Modal" aria-label="Close Modal" type="button"></button>
      <h1 class="fsa-modal__title">[small title]</h1>
      <p>Eos reiciendis expedita esse, maiores nesciunt ratione dolore libero porro quas. Rerum atque fugiat esse, tenetur debitis reiciendis commodi et ut nulla?</p>
      <p>Odio aspernatur quo voluptatum dolorem obcaecati? Ipsum aliquid quae perspiciatis repudiandae nam magnam commodi cumque omnis!</p>
      <ul>
        <li><a href="/link.html">Fake Link</a></li>
        <li><a href="/link.html">Fake Link</a></li>
      </ul>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur consequatur minus aspernatur necessitatibus ipsum dignissimos quis pariatur ea ex, numquam! Sapiente, maiores quas esse nemo similique facere fugit vitae vero.</p>
    </div>
  </div>
</div>

Large

<div tabindex="0" id="UNIQUE-ID-23458CF77S77S7" class="fsa-modal fsa-modal--large" role="dialog" aria-hidden="true">
  <div class="fsa-modal__dialog">
    <div class="fsa-modal__content">
      <button class="fsa-modal__close" data-behavior="close-modal" title="Close Modal" aria-label="Close Modal" type="button"></button>
      <h1 class="fsa-modal__title">[large title]</h1>
      <p>Eos reiciendis expedita esse, maiores nesciunt ratione dolore libero porro quas. Rerum atque fugiat esse, tenetur debitis reiciendis commodi et ut nulla? Odio aspernatur quo voluptatum dolorem obcaecati? Ipsum aliquid quae perspiciatis repudiandae nam magnam commodi cumque omnis! Amet tempore, sint mollitia facere, dolore velit, similique dolorem est ducimus dolorum molestiae totam molestias eveniet delectus accusamus saepe! Odio, libero quasi.</p>
      <ul>
        <li><a href="/link.html">Fake Link</a></li>
        <li><a href="/link.html">Fake Link</a></li>
      </ul>
      <p>Quis aspernatur assumenda fugiat voluptatibus suscipit quos autem doloremque, amet deleniti facilis, aperiam ex magnam pariatur odit expedita eos voluptatem minus labore!</p>
    </div>
  </div>
</div>

Fullscreen

<div tabindex="0" id="UNIQUE-ID-23451CF80S77S9" class="fsa-modal fsa-modal--fullscreen" role="dialog" aria-hidden="true">
  <div class="fsa-modal__dialog">
    <div class="fsa-modal__content">
      <button class="fsa-modal__close" data-behavior="close-modal" title="Close Modal" aria-label="Close Modal" type="button"></button>
      <h1 class="fsa-modal__title">[fullscreen title]</h1>
      <p>Eos reiciendis expedita esse, maiores nesciunt ratione dolore libero porro quas. Rerum atque fugiat esse, tenetur debitis reiciendis commodi et ut nulla? Odio aspernatur quo voluptatum dolorem obcaecati? Ipsum aliquid quae perspiciatis repudiandae nam magnam commodi cumque omnis! Amet tempore, sint mollitia facere, dolore velit, similique dolorem est ducimus dolorum molestiae totam molestias eveniet delectus accusamus saepe! Odio, libero quasi. Quis aspernatur assumenda fugiat voluptatibus suscipit quos autem doloremque, amet deleniti facilis, aperiam ex magnam pariatur odit expedita eos voluptatem minus labore!</p>
      <ul>
        <li><a href="/link.html">Fake Link</a></li>
        <li><a href="/link.html">Fake Link</a></li>
      </ul>
      <p>Ad, mollitia reiciendis maiores saepe vero repellat unde esse, tempora illo deserunt necessitatibus dignissimos perspiciatis et reprehenderit expedita eos eaque sint ab. Velit harum consequatur quam ratione voluptatem officia, necessitatibus quasi facere nulla sint, eius nihil id accusantium minus pariatur corporis. Perferendis, non, consectetur. </p>
    </div>
  </div>
</div>

Top

Can be appended to Default, Small, and Large variants; e.g. class="fsa-modal fsa-modal--small fsa-modal--top".

<div tabindex="0" id="UNIQUE-ID-2345SFGER99786" class="fsa-modal fsa-modal--top" role="dialog" aria-hidden="true">
  <div class="fsa-modal__dialog">
    <div class="fsa-modal__content">
      <button class="fsa-modal__close" data-behavior="close-modal" title="Close Modal" aria-label="Close Modal" type="button"></button>
      <h1 class="fsa-modal__title">[top title]</h1>
      <p>Eos reiciendis expedita esse, maiores nesciunt ratione dolore libero porro quas. Rerum atque fugiat esse, tenetur debitis reiciendis commodi et ut nulla?</p>
      <p>Odio aspernatur quo voluptatum dolorem obcaecati? Ipsum aliquid quae perspiciatis repudiandae nam magnam commodi cumque omnis!</p>
      <ul>
        <li><a href="/link.html">Fake Link</a></li>
        <li><a href="/link.html">Fake Link</a></li>
      </ul>
      <p>Amet tempore, sint mollitia facere, dolore velit, similique dolorem est ducimus dolorum molestiae totam molestias eveniet delectus accusamus saepe! Odio, libero quasi.</p>
      <p>Quis aspernatur assumenda fugiat voluptatibus suscipit quos autem doloremque, amet deleniti facilis, aperiam ex magnam pariatur odit expedita eos voluptatem minus labore!</p>
      <p>Amet deserunt commodi velit officia suscipit magnam praesentium explicabo delectus animi. Sapiente beatae adipisci saepe perferendis, iste quaerat aperiam vero architecto provident.</p>
    </div>
  </div>
</div>

Responsive

View on a larger screen or device to fully appreciate Responsive Web Design rendering.

Usage

Use

When completing a subtask required by underlying page.
When you need to isolate a feature or action to gain sole focus of that feature or action.
When providing non-essential information related to the underlying page.

Don’t Use

When its content or features can be part of the page without complicating the page’s intent.
When the content or message requires interaction with other parts of the application or screen.
When requiring a user to confirm an action, use Growl Notification’s “Modal-based” variant.
To communicate brief responses or status changes, use a Growl Notification.
As a system timeout message, use Growl Notification’s “Modal-based” variant.

Accessibility

Accessibility Timeouts Guide for system timeout guidance.
Note aria and role attributes in use by component variants and examples.
Managing focus:
- Trap focus inside to the Modal using JavaScript when displayed.
- Dismissing Modal returns focus to originating element, e.g. the button or link that initially spawned the Modal’s display.
- Refer to this page’s JavaScript Guidance for details.

General Guidance

The control element that triggers the Modal requires an aria-controls parameter that matches the ID of the Modal.

JavaScript Guidance

Disclaimer

All JavaScript included in the Design System's CSS Framework, fsa-style, are not approved for Production use. Their role is purely for demonstration purposes only, providing development teams with the inspiration, reference, and guidance to fully implement a component's UI behavior.

Script demonstrations are primarily UI-oriented, typically manipulating the HTML in basic ways (i.e. DOM Scripting). Two frequent examples:

Adding and/or removing a class, e.g. addClass('component-name--active')
Adding and/or removing an attribute, e.g. setAttribute('aria-expanded', 'false')

Summary

Modal popups’ HTML and its content are typically injected into a page when an app requires its use. For the purposes of this demonstration, they already exist (hidden) in the HTML idle until an action calls for its state to change (show).

Set aria-hidden attribute to false
Trap keydown event to set Tab Order
Add fsa-modal-scroll-fix class to fix double scrollbar issue
Set focus of cursor to Modal

Set aria-hidden attribute to true
Remove fsa-modal-scroll-fix class from element
Set aria-expanded attribute to false
Set focus to the element that triggered Modal

Overview