O elemento <dialog>
, do HTML 5, junto com os elementos <details>
e <summary>
, está caracterizado, nas especificações da W3C e na WHATWG, como um elemento interativo, W3C sessão 4.11.3 e WHATWG sessão 4.11.4.
No topo deste mesmo arquivo há o texto:
The following features are at risk and may be removed due to lack of implementation.
<dialog>
<details>
and <summary>
O que indica que o futuro destes elementos podem estar comprometidos. Não fica claro, nem nas especificações, nem nas documentações dos navegadores quais são os riscos que estes elementos causam e se esse é o real motivo para eles não terem desenvolvido suporte aos tais.
Ela surgiu no HTML 5 e tem uma palavra que resume toda esta versão: semântica. Como você bem descreveu na pergunta, hoje as janelas modais são criadas a partir de elementos que não foram elaborados para tal, que demandam de auxílio do JavaScript e CSS para possuírem o comportamento desejado. Recentemente tanto a W3C quanto a WHATWG começaram a justamente incriminar essas coisas, pois afeta a semântica do documento. Assim, definiram a tag <dialog>
justamente para criar as janelas modais de forma nativa, apenas com HTML, usando JS apenas para controlar sua exibição, através dos eventos na página, geralmente.
Feita a introdução, vamos às perguntas:
Qual é a finalidade e como funciona a tag <dialog>
?
Como comentado, a tag dialog>
foi especificada justamente com o intuito de permitir o uso de janelas modais de forma nativa, sem depender de bibliotecas para isso. Algo no meio do caminho parece que saiu errado e os navegadores não desenvolveram suporte a ela. Como funciona?
Como funciona?
O elemento <dialog>
é um elemento fluido e suporta qualquer conteúdo fluido. Possui suporte a todos os atributos globais mais o atributo open
, que define quando a janela de diálogo deve ser exibida.
Sua interface no DOM é:
[Exposed=Window,
HTMLConstructor]
interface HTMLDialogElement : HTMLElement {
[CEReactions] attribute boolean open;
attribute DOMString returnValue;
[CEReactions] void show();
[CEReactions] void showModal();
[CEReactions] void close(optional DOMString returnValue);
};
O atributo open
é do tipo booleano e, quando especificado, indica que a janela de diálogo está ativa e que o usuário pode interagir com ela. Quando omitido, a janela de diálogo não deverá ser exibida ao usuário.
Nota: omitindo o atributo open
costuma ocultar a janela de diálogo, porém, ao fazê-lo, atente-se às consequências:
- O evento
close
não será disparado;
- O método
close()
, junto com qualquer outro método de cancelamento provido pelo agente de usuário, não terá mais a competência de fechar
a janela;
- Se a janela for exibida pelo método
showModal()
, o documento continuará bloqueado.
Por estas razões, praticamente nunca será recomendado remover o
atributo open
manualmente; prefira sempre fechar a janela através do
método close()
.
Nota retirada e traduzida da especificação WHATWG.
O atributo tabindex
jamais deverá ser especificado para o elemento, pois, quando aberto, bloqueará o documento, sendo o único elemento a ser interagido (pois todos os elementos do documento passam a ficar inertes) e, quando ocultado, não deverá fazer parte da navegação.
Sobre os métodos do elemento no DOM< temos:
dialog.show()
: Exibe a janela de diálogo;
dialog.showModal()
: exibe a janela de diálogo na forma modal, sobrepondo todo o conteúdo¹;
dialog.close([returnValue])
: oculta o elemento e, se possuir um argumento, terá seu valor retornado (este mesmo valor poderá ser definido através de dialog.returnValue
);
¹: Quando utilizados mais de um <dialog>
no documento, ao utilizar o método show()
em todos, a ordem deles no documento importará, sendo o último sobrepondo todos os outros, já quando utilizado o método showModal()
, sobreporá todo o documento aquela janela no qual foi aberta por último. Testes demonstrando este comportamento mais abaixo.
Exemplo com duas janelas de diálogos abertas inicialmente
Só funciona no Google Chrome!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quae doloribus consequuntur unde, atque inventore numquam corporis vel, quod neque cupiditate optio fuga, natus beatae architecto blanditiis voluptate perspiciatis debitis.</p>
<input type="text">
<dialog open id="dialog1">
<p>Janela de diálogo 1</p>
<button onclick="this.parentElement.close()">Fechar</button>
</dialog>
<dialog open id="dialog2">
<p>Janela de diálogo 2</p>
<button onclick="this.parentElement.close()">Fechar</button>
</dialog>
Exemplo com duas janelas de diálogo utilizando o método show()
Só funciona no Google Chrome!
dialog1.close();
dialog2.close();
dialog2.show();
dialog1.show();
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quae doloribus consequuntur unde, atque inventore numquam corporis vel, quod neque cupiditate optio fuga, natus beatae architecto blanditiis voluptate perspiciatis debitis.</p>
<input type="text">
<dialog open id="dialog1">
<p>Janela de diálogo 1</p>
<button onclick="this.parentElement.close()">Fechar</button>
</dialog>
<dialog open id="dialog2">
<p>Janela de diálogo 2</p>
<button onclick="this.parentElement.close()">Fechar</button>
</dialog>
Perceba que, mesmo que dialog1.show()
foi chamado depois de dialog2.show()
, a janela 2 se sobreporá a 1 devido a ordem que estão expostas no documento.
Exemplo com duas janelas de diálogo utilizando o método showModal()
Só funciona no Google Chrome!
const dialog1 = document.getElementById("dialog1");
const dialog2 = document.getElementById("dialog2");
dialog1.close();
dialog2.close();
dialog2.showModal();
dialog1.showModal();
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quae doloribus consequuntur unde, atque inventore numquam corporis vel, quod neque cupiditate optio fuga, natus beatae architecto blanditiis voluptate perspiciatis debitis.</p>
<input type="text">
<dialog open id="dialog1">
<p>Janela de diálogo 1</p>
<button onclick="this.parentElement.close()">Fechar</button>
</dialog>
<dialog open id="dialog2">
<p>Janela de diálogo 2</p>
<button onclick="this.parentElement.close()">Fechar</button>
</dialog>
Já utilizando showModal()
, a janela 1 se sobreporá à 2, porém, perceba que quando uma janela sobrepõem outras, as que são sobrepostas não são fechadas.
Qual é a compatibilidade dessa tag?
Quase nulo. Para ver o suporte atual, basta acessar o Can I Use, mas neste exato momento basicamente apenas o Chrome possui suporte:

O que já abrange a grande maioria dos usuários da Internet, bem como o próprio site aponta, mas pessoalmente eu não recomendo seu uso, por ora.
Essa tag tem futuro?
A curto prazo, tudo indica que não. Como comentei, algo saiu errado durante a implementação deste elemento e a própria W3C diz que este elemento poderá ser removido. Não fica muito claro se será removido por os navegadores não o implementarem, ou se eles não implementaram devido algum problema de especificação. Porém, este elemento tem todas as características que o HTML 5 propôs, então acredito que, em algum momento do tempo, ele será redefinido ou reimplementado, corrigindo as falhas que o tornou inutilizável no momento.
Até segundas ordens, o ideal é não utilizá-lo em produção se não quiser ter dores de cabeça.
Como comentado pelo Felipe Marinho, é possível acompanhar a implementação em alguns navegadores: