Modal

Basic modal

<dialog class="bf-modal"></dialog>

Styled

Apply styling for content, heading and close button:

• .bf-modal styles the backdrop overlay and removes default browser styling for <dialog> element
• .bf-modal-close close button
• .bf-modal-content padding and colors for modal content
• .bf-modal-header optional header text (place inside .bf-modal-content)

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

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