Dialog

O elemento dialog cria diálogos modais ou não modais com semântica e teclado nativos. No Belavista, um aviso de “vagas esgotadas” ou a confirmação de inscrição fictícia usa dialog com JavaScript mínimo.

O exemplo deste capítulo é 20-dialog, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira. Este capítulo fecha a faixa HTML do WebDev Full.

O que você vai aprender

• Marcar um dialog com conteúdo e botão de fechar.
• Abrir com showModal() e fechar com close() ou method="dialog".
• Entender backdrop e foco no modo modal.
• Evitar abuso de modais.
• Encerrar o HTML e apontar para a faixa CSS (volumes 21+).

Modal versus não modal

Modal (showModal()): o resto da página fica inerte; há backdrop; o foco fica no diálogo. Não modal (show()): a pessoa ainda interage com o fundo. Prefira modal só quando a interrupção for necessária.

Marcação

<dialog id="aviso-vagas" aria-labelledby="dlg-tit">
  <h2 id="dlg-tit">Vagas esgotadas</h2>
  <p>A turma fictícia de composição está lotada. Entre na lista de espera.</p>
  <form method="dialog">
    <button value="fechar">Fechar</button>
  </form>
</dialog>

method="dialog" no formulário fecha o diálogo ao enviar. Você também pode chamar dialog.close() no script. Escape fecha o modal nativo na maioria dos navegadores.

Abrir, fechar e foco

const dlg = document.getElementById("aviso-vagas");
botaoAbrir.addEventListener("click", () => dlg.showModal());
dlg.addEventListener("close", () => botaoAbrir.focus());

Ao fechar, devolva o foco ao controle que abriu. Assim quem usa teclado não se perde.

Não exagere

Modais cansam. Avisos permanentes podem ser um p na página. FAQs usam details. Reserve dialog para confirmações e mensagens que precisam de atenção pontual.

Antes de inventar um “modal” só com div e JS pesado, veja se dialog resolve. O navegador já cuida de semântica, camada e grande parte do foco.

Erro comum: deixar o dialog sempre visível no HTML sem showModal/show, ou abrir modal na carga da página sem motivo. Outro: esquecer um controle de fechar acessível e um título claro (h2 ou aria-labelledby).

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dialog — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Inscrições do ateliê</h1>
      <p>Demonstração local. Nenhum dado é enviado a um servidor real.</p>
      <button type="button" id="abrir">Ver aviso de vagas</button>

      <dialog id="aviso-vagas" aria-labelledby="dlg-tit">
        <h2 id="dlg-tit">Vagas esgotadas</h2>
        <p>A oficina de tipografia móvel (turma fictícia) está lotada.</p>
        <form method="dialog">
          <button value="ok">Entendi</button>
        </form>
      </dialog>
    </main>
    <script>
      const dlg = document.getElementById("aviso-vagas");
      const abrir = document.getElementById("abrir");
      abrir.addEventListener("click", () => dlg.showModal());
      dlg.addEventListener("close", () => abrir.focus());
    </script>
  </body>
</html>

Abra o diálogo, pressione Escape, confira se o foco volta ao botão.

Fechamento da faixa HTML e próximos passos (CSS)

Você percorreu visão geral, documento, metadados, semântica, títulos, atributos, texto, links, listas, navegação, tabelas, formulários, imagens, áudio/vídeo, template/shadow, APIs, foco, texto em linha, details e dialog.

O Laboratório Belavista já tem estrutura. A partir do volume 21 do WebDev Full entra a faixa CSS: modelo de caixa, seletores, cascata, layout, Flexbox, Grid e o restante do volumes.json. Lá você estiliza o que marcou aqui — com foco visível, contraste e sem editar frameworks de terceiros no lugar errado.

Servidor de estudo continua em 127.0.0.1. Não publique dados reais. Guarde os exemplos 01–20 como retratos do HTML do ateliê.

Atividades

1. Qual a diferença entre showModal() e show()?
2. O que method="dialog" faz no formulário interno?
3. Por que devolver o foco ao botão que abriu o diálogo?

Respostas comentadas

1. showModal() cria diálogo modal com backdrop e página inerte; show() abre sem tornar o resto inerte.
2. Faz com que o envio do formulário feche o dialog nativamente.
3. Para quem usa teclado continuar de onde parou, sem perder o lugar na página.

O arquivo completo

Referência do exemplo 20-dialog, reproduzida aqui para que você possa conferir sem sair da página.

simulacao.js

const form=document.querySelector('form');
if(form){form.querySelector('[type=submit]').disabled=false;form.addEventListener('submit',e=>{e.preventDefault();const r=document.querySelector('#retorno');r.textContent='Simulação concluída. Nada foi enviado ou guardado. Use dados fictícios.';r.focus();});}