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

Oelemento 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 aceiteflow content
Permitted ARIA roles	`alertdialog`
DOM interface	`HTMLDialogElement`

Atributos

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

open: Indica que o Dialog está ativo e pronto para uso. Quando o atributoopen 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 atributomethod="dialog". Quando esse formulário é submetido, o diálogo é fechado com o seureturnValue (valor de retorno) configurado para o valor botãosubmit 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 janelamodal está aberta, por exemplo. O backdrop(pano de fundo) só está disponível quando um diálogo é exibido comHTMLDialogElement.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>  <form method="dialog">    <section>      <p>        <label for="favAnimal">Favorite animal:</label>        <select>          <option></option>          <option>Brine shrimp</option>          <option>Red panda</option>          <option>Spider monkey</option>        </select>      </p>    </section>    <menu>      <button type="reset">Cancel</button>      <button type="submit">Confirm</button>    </menu>  </form></dialog><menu>  <button>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();  });})();