Modal

Basic modal

<dialog class="bf-modal"></dialog>
<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>
<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>
<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>