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

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	None, both the starting and ending tag are mandatory.
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();
  });
})();

Resultado

Especificações

Specification
HTML Standard # the-dialog-element

Compatibilidade com navegadores

BCD tables only load in the browser

Polyfills

Inclua este polyfill para suportar browsers antigos.

dialog-polyfill

Veja também

O close evento
O cancel evento
Guia de formulários HTML.