Sobreposições
Janela modal
Modal dialog
Uma janela sobre a página que pede sua atenção antes de você continuar.
SEU ESPAÇOSalvar alterações?
Deixe tudo pronto para a próxima ideia.
DepoisSalvar
Exemplo didático · Representação visual do padrão
Quando usar
Confirmar uma decisão ou concluir uma tarefa curta sem sair da tela.
Cuidados e acessibilidade
Ao abrir, mova o foco para a janela. Permita fechar com Esc e devolva o foco ao acionador.
Partes e comportamento
Acionador, fundo de sobreposição, título, conteúdo, ações e controle de fechamento.
Não confunda
Um popover não necessariamente bloqueia o restante da tela. Uma janela modal bloqueia a interação com o fundo.
Exemplo de código
<button id="abrir">Editar nome</button>
<dialog id="editor" aria-labelledby="titulo">
<h2 id="titulo">Editar nome</h2>
<form method="dialog"><button>Fechar</button></form>
</dialog>
<script>
const editor = document.querySelector("#editor");
document.querySelector("#abrir").onclick = () => editor.showModal();
</script>Trecho didático. Integre e teste no contexto do seu projeto.