<dialog> nativo

Criar um modal do zero exige lidar com overlay, travar o scroll da página, fechar com Esc, devolver o foco pro elemento certo depois de fechado... o elemento <dialog> resolve tudo isso nativamente, com uma API simples em JavaScript.

O jeito antigo

<div id="overlay" class="escondido">
    <div id="modal">
        Conteúdo do modal
        <button id="fechar">Fechar</button>
    </div>
</div>

E em JavaScript: mostrar/esconder o overlay, travar o overflow do body, escutar a tecla Esc, gerenciar foco manualmente — tudo por conta própria.

Como funciona o dialog

<dialog id="modal">
    <p>Conteúdo do modal</p>
    <button id="fechar">Fechar</button>
</dialog>

<button id="abrir">Abrir modal</button>

const modal = document.getElementById('modal');

document.getElementById('abrir').addEventListener('click', () => {
    modal.showModal();
});

document.getElementById('fechar').addEventListener('click', () => {
    modal.close();
});

showModal() exibe o dialog centralizado, no "top layer" acima de todo o resto, com um ::backdrop escurecendo a página, trava o foco dentro dele e já fecha com a tecla Esc — tudo isso de graça.

Fechando sem JavaScript

Um botão com type="submit" dentro de um <form method="dialog"> fecha o dialog automaticamente:

<dialog id="modal">
    <form method="dialog">
        <p>Tem certeza que deseja continuar?</p>
        <button value="cancelar">Cancelar</button>
        <button value="confirmar">Confirmar</button>
    </form>
</dialog>

O valor do botão clicado fica disponível em modal.returnValue depois de fechado, permitindo saber qual ação o usuário escolheu sem escrever nenhum listener de clique.

Estilizando o dialog e o backdrop

dialog {
    border: none;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog não-modal

Também é possível abrir um dialog sem bloquear o restante da página, usando show() em vez de showModal() — útil para painéis auxiliares que não devem travar a interação com o resto da tela.

modal.show(); // sem backdrop, sem travar o foco

Quando usar

Confirmações, formulários e avisos que exigem atenção do usuário.
Qualquer modal que hoje é feito com div + CSS + JavaScript manual.
Painéis auxiliares não bloqueantes, usando o modo não-modal.

Compatibilidade

O suporte já é excelente nos navegadores modernos, o que torna o <dialog> seguro para usar em produção na maioria dos projetos atuais.

caniuse

Conclusão

O <dialog> nativo entrega, de graça, comportamentos que antes exigiam bastante código e atenção a detalhes de acessibilidade: foco, backdrop, fechamento com Esc e camada de sobreposição. Vale a pena preferir ele a um modal feito do zero.