Como o elemento de diálogo nativo funciona?

Question

Accepted Answer

`<dialog>` é o elemento nativo para **modais e diálogos**. Ele cuida do aprisionamento de foco, do pano de fundo, da camada superior e do fechamento com Escape — recursos que você teria que construir manualmente com muito JavaScript e 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>
```

## Abrindo e fechando em 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
});
```

## O que você obtém gratuitamente com showModal()

- **Aprisionamento de foco** — Tab permanece dentro do diálogo enquanto aberto.
- **Pano de fundo** — estilizável via `::backdrop`, e cliques fora são detectáveis.
- **Camada superior** — renderizada acima de tudo independentemente de `z-index`.
- **Tecla Escape** o fecha.
- **`method="dialog"`** em um formulário fecha o diálogo e registra qual botão foi submetido.

## Estilizando o pano de fundo

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

## Por que isso importa

Antes de `<dialog>`, modais acessíveis exigiam gerenciamento manual de foco, funções ARIA, bloqueio de rolagem e tratamento de Escape — uma fonte notória de bugs.

O elemento nativo oferece tudo isso corretamente pronto para usar.

Use `showModal()` para modais verdadeiros; é o padrão moderno e acessível para diálogos.