Skip to content
@erikakers/slate

Dialog

<dialog>. No wrapper, no class, no script beyond opening and closing it: showModal() puts the element in the top layer and paints a ::backdrop; show() does neither.docs/components.md carries the surface, the boundary and the scrim's provenance: one treatment for both, with the browser drawing the difference.

The element

No class is required. dialog is the whole selector.

Delete this note?

This cannot be undone. The note and its revisions go with it.

Non-modal

Saved

The page behind this one is still live, and still scrolls.

Keyboard interaction

  • Tab or Enter/Space on a trigger button opens the dialog viashowModal() or show().
  • Opening a modal moves focus inside it (the UA default is the dialog itself, or its first autofocus target) and makes the rest of the document inert: Tab cannot leave the dialog while it is open. A non-modal does not trap focus: the page behind it stays operable.
  • Escape closes a modal dialog; the UA provides this for free.
  • <form method="dialog"> is the documented close pattern: any submit button inside it closes the dialog without a page navigation and without a line of script, and the value the button carries becomes dialog.returnValue.
  • Closing a dialog whose contents held focus returns focus to the element that opened it: the UA records the previously-focused element when showModal()/show() runs and restores it on close, with no script needed on either side.