dialog: modal nativo
Toda janela de confirmação, aviso de cookies ou popup que você já viu na web foi, por muito tempo, construída do zero em JavaScript e CSS. O HTML tem uma tag pronta para isso.
Estudar esta lição interativa →Praticamente todo site tem, em algum lugar, uma janela que aparece por cima do resto da página: uma confirmação de exclusão, um aviso de cookies, um formulário de login. Por muitos anos, construir essa janela "do jeito certo" (escurecendo o fundo, travando o foco do teclado lá dentro, fechando com a tecla Esc) exigia escrever bastante CSS e JavaScript, ou instalar uma biblioteca só para isso. O HTML tem uma tag pronta para exatamente essa necessidade: <dialog>.
Pense na diferença entre uma caixa qualquer aberta em cima de uma mesa (você pode ignorá-la e continuar mexendo em outras coisas ao redor) e a porta de um cofre de banco, que tranca tudo por trás de si até você resolver o que precisa ali dentro. Um <dialog> com o atributo open é a caixa: aparece, mas o resto da página continua acessível normalmente. Chamado com .showModal() via JavaScript, ele vira o cofre: escurece o fundo, trava o foco do teclado lá dentro, e só libera quando fechado.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique em 'Excluir conta': o fundo escurece e o foco fica preso no dialog, até você escolher uma opção.
A mesma ideia, sem nenhum <script>: o botão aponta para o dialog com commandfor e diz o que fazer com command. O valor show-modal abre como modal e close fecha. Se o seu navegador for antigo demais, o botão simplesmente não faz nada, e é por isso que o showModal() continua sendo o plano B.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Sem script: o botão usa commandfor e command para abrir o dialog como modal.
Repare em dois detalhes do exemplo. Primeiro, abrir o dialog como modal de verdade precisou de uma linha de JavaScript, dialogo.showModal(), disparada no clique do botão: a forma mais compatível, que funciona em qualquer navegador. Hoje existe também um caminho só de HTML: um botão com commandfor="id-do-dialog" e command="show-modal" abre o dialog como modal, sem script nenhum (são os Invoker Commands, disponíveis nos navegadores atuais, mas ainda recentes: confira a tabela de compatibilidade no MDN antes de depender deles em produção). Segundo, para fechar o dialog, nenhum JavaScript foi necessário: um <form method="dialog"> dentro dele fecha o próprio dialog sozinho ao ser enviado, um recurso nativo bem menos conhecido, mas extremamente útil.
Usar só <dialog open> esperando o comportamento de um modal de verdade é o erro mais comum: sem .showModal(), não existe fundo escurecido, não existe travamento de foco, o conteúdo se comporta como qualquer outra caixa na página. E, quando o fechamento não usa form method="dialog", é preciso lembrar de chamar dialogo.close() manualmente em algum evento de clique, senão o dialog fica aberto para sempre.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione o script que abre o dialog no clique do botão.