<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();
  });
})();