<dialog>
A dialog box with focus management, top-layer rendering, and Esc-to-close built in.
Baseline: Widely available · Interactive
When to use it
showModal() for modals (::backdrop, focus trap, inert background all free); dialog open renders non-modal without any script; forms with method='dialog' close it.
When not to
Never rebuild modals from divs and focus-trap libraries — this element is why you don't have to.
Key attributes
open- visible (non-modal when set by markup)
closedby- light-dismiss behavior
Example
<dialog open>
<p>Scheduled maintenance Sunday 02:00–04:00 UTC.</p>
<form method='dialog'>
<button>Got it</button>
</form>
</dialog>