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