Modal
Pop-up box with full-screen backdrop
Modal
Go to top
Also see /react/modal
React component
Basic modal
HTML
<dialog class="bf-modal"></dialog>Styled
Apply styling for content, heading and close button:
.bf-modalstyles the backdrop overlay and removes default browser styling for<dialog>element.bf-modal-closeclose button.bf-modal-contentpadding and colors for modal content.bf-modal-headeroptional header text (place inside.bf-modal-content)
HTML
<dialog class="bf-modal bf-scrollbar">
<button type="button" class="bf-modal-close" aria-label="Close modal">
<i class="fa-regular fa-xmark"></i>
</button>
<div class="bf-modal-content">
<header className="bf-modal-header">Modal title</header>
Rest of modal content
</div>
</dialog>Interactive demo
For <dialog>
elements, the browser exposes
.showModal() and
.close()
methods that can be used to open and close the modal.
ESC keypress will also close the dialog by default.
HTML
<button class="bf-button" id="openButton">Open modal</button>
<dialog class="bf-modal bf-scrollbar" id="dialogElement">
<button
type="button"
class="bf-modal-close"
id="closeButton"
aria-label="Close modal"
>
<i class="fa-regular fa-xmark"></i>
</button>
<div class="bf-modal-content">
<header class="bf-modal-header">Modal title</header>
Rest of modal content
</div>
</dialog>
<script>
const dialogElement = document.getElementById("dialogElement");
const openButton = document.getElementById("openButton");
const closeButton = document.getElementById("closeButton");
openButton.addEventListener("click", () => dialogElement.showModal());
closeButton.addEventListener("click", () => dialogElement.close());
// optional: close modal on dialog overlay click
dialogElement.addEventListener("click", (e) => {
if (e.target === dialogElement) dialogElement.close();
});
</script>Sandbox
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css"> <link rel="stylesheet" href="styles.css"> <div class="bf-page-padding"> <button type="button" class="bf-button" id="openButton">Open modal</button> <dialog class="bf-modal bf-scrollbar" id="dialogElement"> <button type="button" class="bf-modal-close" id="closeButton" aria-label="Close modal" > <i class="fa-solid fa-xmark"></i> </button> <div class="bf-modal-content"> <header class="bf-modal-header">Modal title</header> Rest of modal content </div> </dialog> </div> <script> const dialogElement = document.getElementById("dialogElement"); const openButton = document.getElementById("openButton"); const closeButton = document.getElementById("closeButton"); openButton.addEventListener("click", () => dialogElement.showModal()); closeButton.addEventListener("click", () => dialogElement.close()); dialogElement.addEventListener("click", (e) => { if (e.target === dialogElement) dialogElement.close(); }); </script>