<dialog>: O elemento Dialog

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨março de 2022⁩.

* Some parts of this feature may have varying levels of support.

O elemento HTML <dialog> representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.

Categorias de conteúdo	Flow content, sectioning root
Permitted content	Flow content
Tag omission	Nenhuma, tanto a tag inicial quanto a final são obrigatórias.
Permitted parents	Qualquer elemento que aceite flow content
Permitted ARIA roles	`alertdialog`
DOM interface	`HTMLDialogElement`

Atributos

Este elemento inclui os atributos globais. O atributo tabindex não deve ser utilizado no elemento <dialog>.

open: Indica que o Dialog está ativo e pronto para uso. Quando o atributo open não for definido, ele não deve ser mostrado ao usuário.

Notas de uso

Elementos de formulário (<form>) podem ser integrados dentro de um elemento <dialog>, especificando-os com o atributo method="dialog". Quando esse formulário é submetido, o diálogo é fechado com o seu returnValue (valor de retorno) configurado para o valor botão submit do formulário que foi usado.
O pseudo-elemento CSS ::backdrop pode ser usado para estilizar o fundo de um elemento <dialog>, como um escurecer um conteúdo inacessível enquanto uma janela modal está aberta, por exemplo. O backdrop(pano de fundo) só está disponível quando um diálogo é exibido com HTMLDialogElement.showModal().

Exemplos

Exemplo simples

html

<dialog open> <p>Olá para todos!</p> </dialog>

Exemplo Avançado

Este exemplo abre uma caixa de diálogo contendo um formulário quando o botão "Update details" é clicado.

HTML

html

<!-- Um dialog simples contendo um form --> <dialog open id="favDialog"> <form method="dialog"> <section> <p> <label for="favAnimal">Favorite animal:</label> <select id="favAnimal"> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select> </p> </section> <menu> <button id="cancel" type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form> </dialog> <menu> <button id="updateDetails">Update details</button> </menu>

JavaScript

(function () { var updateButton = document.getElementById("updateDetails"); var cancelButton = document.getElementById("cancel"); var favDialog = document.getElementById("favDialog"); // O botão Update abre uma Dialog updateButton.addEventListener("click", function () { favDialog.showModal(); }); // O botão cancelButtom fecha uma Dialog cancelButton.addEventListener("click", function () { favDialog.close(); }); })();