Dialog

A native <dialog> element for popovers and modal overlays. Use an <article class="card"> inside for the card styling.

Composed of

Card: The surface the dialog content sits on

Works with

Button: Triggers and actions, like close or confirm

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/dialog.css" />

Default

Use .show() for non-modal dialogs that don't block interaction with the rest of the page. Close with <form method="dialog">.

<button onclick="document.getElementById('my-dialog').show()">
  Open dialog
</button>

<dialog id="my-dialog" closedby="any">
  <article class="card">
    <p style="margin-bottom: 1rem">This is a non-modal dialog.</p>
    <form method="dialog">
      <button class="outlined">Close</button>
    </form>
  </article>
</dialog>

Call .showModal() to open as a modal. It blocks interaction with the page and renders a backdrop.

<button onclick="document.getElementById('my-modal').showModal()">
  Open modal
</button>

<dialog id="my-modal" closedby="any">
  <article class="card">
    <p>This is a modal dialog.</p>
    <form method="dialog">
      <button>Confirm</button>
      <button class="outlined">Cancel</button>
    </form>
  </article>
</dialog>

With header & footer

Use the card's <header> and <footer> for a structured layout with dividers.

<dialog id="my-modal" closedby="any">
  <article class="card">
    <header>
      <strong>Confirm action</strong>
    </header>
    <p>Are you sure you want to continue?</p>
    <footer>
      <form method="dialog">
        <button class="destructive">Delete</button>
        <button class="outlined">Cancel</button>
      </form>
    </footer>
  </article>
</dialog>

closedby

The closedby attribute controls how a dialog can be dismissed.

closedby="any" closes on outside click or Escape
closedby="closerequest" closes on Escape only (default for modal)
closedby="none" only closes via <form method="dialog">

<dialog closedby="none">...</dialog>

scroll-lock

Add the scroll-lock attribute to prevent the page from scrolling while the dialog is open.

<dialog scroll-lock closedby="any">...</dialog>

API reference

Type	Classes / attributes	What it does
Scroll lock	`[scroll-lock]`	Stops the page from scrolling while the dialog is open