Skip to Main Content
Mosaic Logo
Mosaic Logo
  • Home
  • Browse components
  • Use in projects
    • Colors
    • Icons
    • Grid
    • Links
    • Typography
    • Spacing Utilities
    • SVG
    • Accordions
    • Alerts
    • Badges
    • Buttons
    • Copy to clipboard
    • Cards
    • Featured Container
    • Filter Bar
    • Lists
    • Loading Spinners
    • Modals
    • Pagination
    • Progress Bars
    • Progress Indicator
    • Site Banner
    • Tables
    • Tabs
    • Toast
    • Toggle Switches
    • Well
    • Wizard
    • Events
    • File Browser
    • File Upload
    • Footer
    • Header
    • Hero
    • Post Item
    • Profile
    • Sidebar Navigation
    • Splash
    • Stack
    • Form Instructions
    • Form Layout
    • Form Validation
    • Form Output
    • Checkboxes
    • Labels
    • Radio Buttons
    • Search Input
    • Select
    • Text Inputs

Modals

Description

Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Accessibility Considerations

ARIA

Be sure to add aria-labelledby="...", referencing the modal title, to .modal. Additionally, you may give a description of your modal dialog with aria-describedby on .modal. Note that you don’t need to add role="dialog" since Bootstrap5 already adds it via JavaScript.

Icons

It is important that close icons have aria-label="Close" to indicatre the button closes the modal.

Static Backdrop

Clicking on the modal “backdrop” will automatically close the modal. When backdrop is set to static, the modal will not close when clicking outside of it.


  <div
    class="modal fade"
    id="staticBackdrop"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-labelledby="staticBackdropLabel"
    aria-hidden="true">
    

Scrolling Long Content

When modals become too long for the user's viewport or device, they scroll independent of the page itself. We recommend using .modal-dialog-scrollable class to scroll the modal body.

Title/Header for the modal

Now we can begin working on lots of happy little things. We need dark in order to show light. In life you need colors. Isn't it fantastic that you can change your mind and create all these happy things?

You have to make almighty decisions when you're the creator. When you buy that first tube of paint it gives you an artist license. See. We take the corner of the brush and let it play back-and-forth.

There we go. We don't have to be committed. We are just playing here. Isn't it great to do something you can't fail at?

Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned. Let's put some happy little bushes on the other side now. Clouds are free they come and go as they please. The little tiny Tim easels will let you down. You're the greatest thing that has ever been or ever will be. You're special. You're so very special.

Didn't you know you had that much power? You can move mountains. You can do anything. It all happens automatically. Don't forget to tell these special people in your life just how special they are to you. And just raise cain.

UX Team Favorite Pizza Toppings
Index
Given
Last
Favorite Pizza Topping
1 Mark Otto Pepperoni
2 Jacob tdornton Pineapple
3 Larry Bird Basil

Isn't that fantastic? You can just push a little tree out of your brush like that. Even trees need a friend. We all need friends. Just a happy little shadow that lives in there. In your world you can create anything you desire.

Everything is happy if you choose to make it that way. And maybe, maybe, maybe... This present moment is perfect simply due to the fact you're experiencing it. Now we'll take the almighty fan brush. Of course he's a happy little stone, cause we don't have any other kind. We must be quiet, soft and gentle.

Didn't you know you had that much power? You can move mountains. You can do anything. It all happens automatically. Don't forget to tell these special people in your life just how special they are to you. And just raise cain.


<button
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#staticBackdrop"
  type="button">
  Launch Modal
</button>

<div
  class="modal fade"
  id="staticBackdrop"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
  tabindex="-1">
  <div
    class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="staticBackdropLabel">
          Title/Header for the modal
        </h2>
        <button
          class="btn-close"
          data-bs-dismiss="modal"
          type="button"
          aria-label="Close"></button>
      </div>
      <div class="modal-body py-0">
        <p>
          Now we can begin working on lots of happy little things. We need dark
          in order to show light. In life you need colors. Isn't it fantastic
          that you can change your mind and create all these happy things?
        </p>

        <p>
          You have to make almighty decisions when you're the creator. When you
          buy that first tube of paint it gives you an artist license. See. We
          take the corner of the brush and let it play back-and-forth.
        </p>

        <p>
          There we go. We don't have to be committed. We are just playing here.
          Isn't it great to do something you can't fail at?
        </p>

        <p>
          Maybe there was an old trapper that lived out here and maybe one day
          he went to check his beaver traps, and maybe he fell into the river
          and drowned. Let's put some happy little bushes on the other side now.
          Clouds are free they come and go as they please. The little tiny Tim
          easels will let you down. You're the greatest thing that has ever been
          or ever will be. You're special. You're so very special.
        </p>

        <p>
          Didn't you know you had that much power? You can move mountains. You
          can do anything. It all happens automatically. Don't forget to tell
          these special people in your life just how special they are to you.
          And just raise cain.
        </p>

        <figure>
          <figcaption>UX Team Favorite Pizza Toppings</figcaption>
          <div class="table-responsive border border-dark my-2">
            <table
              class="table table-sm table-light table-bordered mb-0"
              tabindex="0">
              <thead>
                <tr>
                  <th scope="col">
                    <div class="d-flex w-100">
                      <span class="js-tbl-trunc">Index</span>
                    </div>
                  </th>
                  <th scope="col">
                    <div class="d-flex w-100">
                      <span class="js-tbl-trunc">Given</span>
                    </div>
                  </th>
                  <th scope="col">
                    <div class="d-flex w-100">
                      <span>Last</span>
                    </div>
                  </th>
                  <th scope="col">
                    <div class="d-flex w-100">
                      <span class="js-tbl-trunc">Favorite Pizza Topping</span>
                    </div>
                  </th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td scope="row">1</td>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>Pepperoni</td>
                </tr>
                <tr>
                  <td scope="row">2</td>
                  <td>Jacob</td>
                  <td>tdornton</td>
                  <td>Pineapple</td>
                </tr>
                <tr>
                  <td scope="row">3</td>
                  <td>Larry</td>
                  <td>Bird</td>
                  <td>Basil</td>
                </tr>
              </tbody>
            </table>
          </div>
        </figure>

        <p>
          Isn't that fantastic? You can just push a little tree out of your
          brush like that. Even trees need a friend. We all need friends. Just a
          happy little shadow that lives in there. In your world you can create
          anything you desire.
        </p>

        <p>
          Everything is happy if you choose to make it that way. And maybe,
          maybe, maybe... This present moment is perfect simply due to the fact
          you're experiencing it. Now we'll take the almighty fan brush. Of
          course he's a happy little stone, cause we don't have any other kind.
          We must be quiet, soft and gentle.
        </p>

        <p>
          Didn't you know you had that much power? You can move mountains. You
          can do anything. It all happens automatically. Don't forget to tell
          these special people in your life just how special they are to you.
          And just raise cain.
        </p>
      </div>
      <div class="modal-footer">
        <button
          class="btn btn-outline-primary"
          data-bs-dismiss="modal"
          type="button">
          Close
        </button>
        <button class="btn btn-primary" type="button">Understood</button>
      </div>
    </div>
  </div>
</div>

Optional Sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Optional Sizes
Size Class Modal max-width
Small .modal-sm 300px
Default None 588px
Large .modal-lg 800px
Extra large .modal-xl 1140px

Simple messaging

For messaging that doesn't require separate title and body text, enter text with a header class in the modal body.

Accessibility Considerations

If you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user. You can make sure this is not read by adding the aria-hidden="true" to your Font Awesome markup.

Your changes have been saved!

Handling Scroll indication

Modals require a visual to indicate that there is more content to scroll to. Some JS has been provided to add and remove gradient indicators when necessary. You will have to modify it for use in modern front-end frameworks like React.js.



  <script>
    // https://getbootstrap.com/docs/5.2/components/modal/#events
    const mosaicModal = document.querySelector('.modal');
    mosaicModal.addEventListener('shown.bs.modal', (event) => {
      const modalBody = document.querySelector('.modal-body');
      setOverflowIndicationModal(modalBody);
    });

    function setOverflowIndicationModal(e) {
      // compare width and height of elements.
      //If scroll distance is greater than the width of element return "true" (overflow present).
      var overflowX = e.clientWidth < e.scrollWidth;
      var overflowY = e.clientHeight < e.scrollHeight;

      overflowX ? e.classList.add('indicator-x') : e.classList.remove('indicator-x');
      overflowY ? e.classList.add('indicator-y') : e.classList.remove('indicator-y');
    }
  </script>
    

  • facebook

  • Instagram

  • Twitter

  • LinkedIn

  • YouTube

  • Accessibility
  • Privacy Policy
  • Contact Us
Sign up for our newsletter
ICPSR

© 2025 The Regents of the University of Michigan. ICPSR is part of the Institute for Social Research at the University of Michigan.