Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation

Overview

Display layered view above the surface of entire page.

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: Default variant
Default
Modal screen: Small variant
Small
Modal screen: Large variant
Large
Modal screen: Fullscreen variant
Fullscreen
Modal screen: Top variant
Top

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

Modal screen: Default variant
<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

Modal screen: Small variant
<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

Modal screen: Large variant
<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

Modal screen: Fullscreen variant
<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".

Modal screen: Top variant
<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

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

Open Modal

  • 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

Close 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
Return to top