The dialog Tag

The dialog tag is a real popup box built into the browser. Before it existed, a modal meant a pile of JavaScript: a hidden div, a dark overlay, z-index juggling, focus management, and keyboard handling. Dialog replaces that whole stack with one element and two methods.

A dialog is hidden until you call showModal() or show() on it. showModal() opens the box on top of everything, blocks interaction with the page behind it, and paints a dark backdrop. show() opens it as a floating panel without blocking the page. Both are a single line of JavaScript.

Why it exists: modals are everywhere, and doing them right is hard. The browser now handles the hard parts, like keeping keyboard focus inside the box and closing it on Escape. Every modern browser has supported dialog since 2022, so no library and no fallback is needed.

The backdrop

When a modal dialog is open, the browser paints a ::backdrop behind it. This pseudo element is only visible in the top layer, so it only appears with showModal(). You style it with CSS to dim the page. Pressing the Escape key closes a modal dialog automatically.

dialog::backdrop {
  background: rgba(76, 29, 149, 0.4);
}

Closing the dialog

Clicking the backdrop does not close the dialog by default; that is a deliberate choice so users do not lose data by accident. You close it with the close() method, an Escape keypress, or a form with method="dialog". A submit button inside such a form closes the box and sends the form value.

<form method="dialog">
  <button value="ok">Close</button>
</form>

Common mistakes

The dialog element must exist in the page before your script runs, or the id lookup fails. Also, a dialog with no backdrop styling looks like a plain floating box, so add the ::backdrop rule for the classic modal look. Keep a close button inside the box, because not every user knows about the Escape key.

Syntax

<dialog id="myDialog">
  <p>Hello from a native popup.</p>
  <button onclick="myDialog.close()">Close</button>
</dialog>

dialog.addEventListener('click', e=>{ if(e.target===dialog) dialog.close() })
// + dialog::backdrop{pointer-events:none}