Estilização de modais e diálogos

O elemento HTML <dialog> oferece comportamento modal integrado: aprisionamento do foco, fechamento com Escape e API showModal() / close(). Estilize-o com CSS em vez de criar toda a estrutura de um modal personalizado do zero.

O pseudo-elemento ::backdrop estiliza a sobreposição atrás de um <dialog> aberto. Aplique um plano de fundo semitransparente: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. Nenhum elemento div contêiner é necessário.

Centralize os diálogos com CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. Usar margin: auto em um diálogo o posiciona no centro da janela de visualização sem posicionamento feito por JS.

Defina overflow-y: auto no próprio diálogo para lidar com conteúdo longo. Defina overflow: hidden em body quando o modal abrir para impedir a rolagem do plano de fundo — adicione e remova uma classe com JavaScript para alternar esse comportamento.

Anime a entrada do diálogo usando @starting-style (Chrome 117+) para criar animações de entrada somente com CSS, sem JavaScript. Para obter suporte mais amplo, adicione uma classe open com JavaScript e use transition em transform e opacity: deslize para cima de translateY(20px) até translateY(0).

Animar o fechamento de um diálogo é complicado — o diálogo é ocultado imediatamente ao chamar close(). Soluções: use a API de popover, que oferece suporte nativo a animações de fechamento, ou intercepte o fechamento com JavaScript, reproduza a classe da animação de saída e chame close() depois que a animação terminar.

Os diálogos são abertos acima de todo o conteúdo restante da página. Evite conflitos de z-index usando o contexto de empilhamento nativo do elemento de diálogo — ele é renderizado na camada superior, acima de todos os valores de z-index do CSS, sem exigir uma configuração de z-index no próprio diálogo.

Em dispositivos móveis, faça os diálogos deslizarem de baixo para cima como uma folha: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. Em computadores, centralize-os como um modal tradicional usando o padrão margin: auto.

O elemento de diálogo nativo move automaticamente o foco para o primeiro elemento focalizável dentro dele quando é aberto. Garanta uma ordem lógica de tabulação no diálogo. Adicione um botão de fechamento que devolva o foco ao elemento acionador quando o diálogo for fechado, para manter um fluxo adequado de navegação pelo teclado.

Adicione aria-labelledby apontando para o título do diálogo e aria-describedby apontando para a descrição do diálogo. O papel do diálogo é implícito para <dialog>. Os leitores de tela anunciam esses rótulos quando o foco entra no diálogo.

Os diálogos de confirmação precisam de: um título com uma pergunta clara, uma breve descrição do impacto, um botão de ação destrutiva (vermelho, alinhado à direita) e um botão de cancelamento (alinhado à esquerda ou secundário). Use autofocus no botão de cancelamento para tornar a escolha segura a interação padrão do teclado.

O elemento de diálogo nativo, com ::backdrop, centralização por margin: auto, controle de transbordamento, animações CSS para a entrada e gerenciamento do foco, oferece um padrão de modal totalmente acessível e orientado por CSS. Disposições responsivas em forma de folha para dispositivos móveis e atributos ARIA adequados completam um componente de diálogo pronto para produção.