Pular para o conteúdo
Herbário do HTML

/static/herbario/disruptivo/especime/dialog/

Menu

HTM-028 · Interativos

<dialog>

Uma caixa modal com foco, camada e fundo próprios.

É o único espécime deste herbário que precisa de JavaScript para florescer. showModal() é o que coloca o diálogo na camada superior, prende o foco dentro dele, torna o resto da página inerte e liga o pseudoelemento ::backdrop. Um <form method="dialog"> fecha a caixa e devolve o valor do botão apertado.

Aberto pelo atributo open direto no HTML, ele existe e aparece — mas sem modalidade, sem fundo escurecido e sem armadilha de foco.

<dialog id="ficha">
  <form method="dialog">
    <p>Exsicata HTM-028 retirada da gaveta.</p>
    <button value="ok">Devolver</button>
  </form>
</dialog>
{esc(legenda)}

Exsicata HTM-028 retirada da gaveta.

Sem showModal(): sem camada superior, sem fundo escurecido e sem foco preso. O botão, porém, fecha de verdade — é o que method="dialog" faz sozinho. Recarregue a página para trazer a caixa de volta.

Espécime vivo pela metade · aberto por atributo, ele existe no fluxo e nada mais