HTMLworkingbaseline-2022

The <dialog> element

Modals, natively.

A native modal element with focus management, backdrop styling, and ESC-to-close all built in. The days of hand-rolling accessible modals are over.

showModal() vs show()

dialog.showModal() opens it modally — focus is trapped, the rest of the page is inert, ESC closes it. dialog.show() opens it non-modally — useful for non-blocking notifications.

Style the backdrop

The ::backdrop pseudo-element styles the dim layer behind a modal dialog. Animate it with transition for a polished open/close.

Form integration

A <form method="dialog"> inside the dialog closes it on submit and exposes the submit value via dialog.returnValue — no JavaScript needed for simple confirmation flows.

More patterns

The three examples below isolate each behaviour: modal vs non-modal opening, the form returnValue round-trip, and a fully animated ::backdrop.

Try it 4 examples

Open and close a modal dialog

HTML+CSS+JSintro

Press Run to execute

⌘+↩

The dialog stays hidden until showModal() paints it centred over a dimmed ::backdrop with the page inert; clicking Cancel or Confirm submits the method="dialog" form, which closes it natively and fires close, so returnValue reflects the chosen button's value (or "" if dismissed with ESC).