SWCore
SWCore / CSS / Modal nativo (sw-dialog)

Modal nativo (sw-dialog) CSS

O

do navegador com entrada e saída animadas, fundo desfocado e página travada atrás.

O que é

Acessível de fábrica: prende o foco dentro, fecha no Esc, avisa o leitor de tela. Fechar é um <form method="dialog">, sem JS. Abrir é uma linha: showModal().

Como funciona

Animação com @starting-style; fundo em ::backdrop; a rolagem da página trava com body:has(dialog[sw-dialog][open]). Não substitui o sw-modal nos sistemas que já usam — é a opção leve para sites.

Exemplos

Central e lateral Ao vivo

Confirmar agendamento?

Terça, 14h — Corte + barba.

Carrinho

Gaveta lateral nativa.

<button onclick="confirma.showModal()">Abrir</button>

<dialog id="confirma" sw-dialog>
  <h3>Confirmar?</h3>
  <form method="dialog">
    <button value="sim">Confirmar</button>
    <button value="nao">Voltar</button>
  </form>
</dialog>

Atributos

dialog[sw-dialog]
modal central
dialog[sw-dialog="lateral"]
gaveta entrando pela direita
<form method="dialog">
qualquer botão dentro dele fecha o modal

Variantes

Nenhum.

Eventos

close (no dialog)
disparado ao fechar; dialog.returnValue traz o value do botão

API (JavaScript)

dialog.showModal()
abre como modal
dialog.close()
fecha

Requisitos

  • swcore.min.css 2.1.0

Limitações — o que ele não faz

Nenhuma.

← AnteriorMenu, aviso e painel (sw-popover) Próximo →Dica ancorada (sw-dica)