How does the native dialog element work?

Question

Accepted Answer

`<dialog>` is the native element for **modals and dialogs**. It handles focus trapping, the backdrop, the top layer, and Escape-to-close — features you'd otherwise hand-build with a lot of JavaScript and ARIA.

```html
<dialog id="myModal">
  <form method="dialog">           
    <h2>Confirm</h2>
    <p>Are you sure?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
```

## Opening and closing in JS

```js
const modal = document.getElementById("myModal");

modal.showModal(); // opens as a MODAL: backdrop + focus trapped + Esc closes
modal.show();      // opens as a NON-modal (no backdrop, page stays interactive)
modal.close("ok"); // closes, sets returnValue

modal.addEventListener("close", () => {
  console.log(modal.returnValue); // "ok" or "cancel" — from the button's value
});
```

## What you get for free with showModal()

- **Focus trapping** — Tab stays inside the dialog while open.
- **Backdrop** — styleable via `::backdrop`, and clicking outside is detectable.
- **Top layer** — renders above everything regardless of `z-index`.
- **Escape key** closes it.
- **`method="dialog"`** on a form closes the dialog and records which button submitted.

## Styling the backdrop

```css
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog { border: none; border-radius: 8px; padding: 2rem; }
```

## Why it matters

Before `<dialog>`, accessible modals required manual focus management, ARIA roles, scroll locking, and Escape handling — a notorious source of bugs.

The native element gives you all of that correctly out of the box.

Use `showModal()` for true modals; it's the modern, accessible default for dialogs.