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.

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).