Modal HTML

Modais: quando a interrupção se justifica

Um modal (ou diálogo modal) é um elemento de overlay que exige a atenção do usuário e bloqueia a interação com o restante da página até ser dispensado. Bem usado, é a forma mais eficiente de confirmar uma ação destrutiva, coletar um input crítico ou exibir mídia que precisa da tela toda. Mal usado — newsletter pulando sozinho, modais aninhados, modal sem fechar visível — vira o padrão mais odiado da web.

A plataforma HTML hoje oferece um primitivo de primeira classe: o elemento <dialog>, suportado em Chrome 37+, Edge 79+, Firefox 98+ e Safari 15.4+. Chamar dialog.showModal() abre o elemento, trava a página por baixo via pseudo-elemento ::backdrop, prende o foco, trata Esc para fechar e devolve o foco ao gatilho automaticamente. Um exemplo mínimo:

<dialog id="confirm">
  <form method="dialog">
    <p>Excluir este arquivo?</p>
    <button value="cancel">Cancelar</button>
    <button value="ok">Excluir</button>
  </form>
</dialog>
<script>
  confirm.showModal()
</script>

Requisitos de acessibilidade

Um modal artesanal (o tipo que este gerador produz, com um div de overlay) precisa reproduzir o que o <dialog> entrega de graça: focus trap (Tab circula dentro do modal), Esc fecha, foco retorna ao elemento que abriu, role="dialog", aria-modal="true" e aria-labelledby apontando para o título. Faltando qualquer um, leitores de tela e usuários de teclado ficam presos atrás do overlay.

Anti-padrões a evitar

• Modais aninhados (um modal abrindo outro) — péssima UX e difícil de escapar.
• Modal que pula segundos após o load (captura de newsletter) — costuma ser contraproducente e bloqueado por navegadores como intrusivo.
• Modais sem botão de fechar visível (X) ou clique-fora-para-fechar — não deixam saída.
• Modal minúsculo centralizado no mobile — prefira full-screen ou bottom-sheet em viewports estreitas.
• Modais com todo o fluxo de onboarding dentro — quebre em wizard ou página dedicada.

Bibliotecas

Em React, os primitivos de referência são @radix-ui/react-dialog (o mais acessível, base do shadcn/ui), @headlessui/react Dialog (Tailwind Labs) e o veterano react-modal. O Material UI traz Modal e Dialog; em Vue há o v-dialog do Vuetify e o Dialog do PrimeVue; o Angular Material tem o MatDialog. Variantes em bottom-sheet são populares em stacks mobile-first (vaul de Emil Kowalski para React).

Modal vs drawer vs toast

Um drawer (side sheet) entra pela lateral e é ótimo para navegação secundária ou filtros — menos interruptivo que um modal. Um toast entrega informação efêmera e não bloqueante. Um modal só justifica a interrupção quando o usuário precisa decidir ou inserir algo antes de continuar. Se a resposta para "e se o usuário ignorar?" for "nada de mal", você não deveria estar usando modal.

Perguntas frequentes

O <dialog> nativo está pronto para produção? Sim em browsers modernos. Para IE/Safari antigo, use o dialog-polyfill do Google.

Todo modal é automaticamente acessível? Não. O <dialog> nativo cuida do foco; modais custom em div exigem focus trap manual, tratamento de Esc e atributos ARIA.

Quando usar um toast em vez de modal? Quando a mensagem é transitória e não bloqueante — "Salvo", "Copiado". Modais ficam reservados para decisões bloqueantes.

Como animar o dialog? CSS moderno suporta @starting-style e a propriedade transition-behavior: allow-discrete para animar mudanças em display. Um fade-in suave com slide-up de 8 px é o padrão canônico.