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