The Native Dialog Element

The <dialog> Element: Native Modals

Before the <dialog> element, modals required hundreds of lines of JavaScript for focus management, keyboard handling, and backdrop clicks. Now the browser handles all of it.

Two Modes

• dialog.show(): Non-modal. Page remains interactive behind it.
• dialog.showModal(): Modal. Adds backdrop, traps focus, closes with Escape, blocks interaction with the rest of the page.

Built-in Accessibility

• Automatic role="dialog"
• Focus trapped inside the modal
• Escape key closes it
• Focus returns to the trigger element on close
• ::backdrop pseudo-element for the overlay

returnValue

Buttons inside a <form method="dialog"> close the dialog and set dialog.returnValue to the button's value — useful for confirm/cancel flows.