<dialog>: O Elemento DIALOG
Última atualização: 2026-10-13
<dialog>O Elemento DIALOG
Representa uma caixa de diálogo ou modal, aberta via showModal()/show() em JavaScript.
| Categoria | Semântico |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </dialog> tag |
| Status | Padrão |
📝 Sintaxe
<dialog>conteúdo do diálogo</dialog>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <dialog> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： showModal() dá um modal nativo (fundo + Esc para fechar); o atributo open mostra sem modal.
❓ Perguntas Frequentes
QQual é a diferença entre dialog e uma camada flutuante com div?
A
<dialog> é o elemento nativo de diálogo modal: aberto com showModal(), já vem com renderização no topo (acima de tudo), contenção de foco e fechamento com Esc, sem precisar escrever z-index nem armadilha de foco. Com div, tudo isso precisa ser implementado à mão.QQual é a diferença entre showModal e show?
A
showModal() abre um diálogo modal: com camada de fundo, bloqueando o restante da página e fechando com Esc; show() abre um diálogo não modal: sem camada de fundo, o usuário continua interagindo com outras partes da página. Ambos fecham com close().Qdialog permite estilização via CSS?
ASim. A camada de fundo é estilizada pelo pseudoelemento
::backdrop, e o corpo do diálogo se estiliza normalmente. Atenção: o display é controlado pelo estado open — ao personalizar, não sobrescreva a lógica de exibição de dialog[open].🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
