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