JS Component
Modal Framework
Diálogos, popups e drawers - focus trap automático, ESC, animações, tamanhos, glassmorphism e drawer lateral. Zero dependências externas.
1. Uso Básico
2. Tamanhos
3. Efeitos de Entrada
4. API JavaScript
// Abrir / fechar programaticamente
SWModal.show('#meuModal');
SWModal.hide('#meuModal');
// Evento disparado ao abrir
document.querySelector('#meuModal')
.addEventListener('sw:modal:open', () => console.log('abriu'));
Quick Reference
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
sw-modal="#id" |
button | Abre o modal pelo seletor |
class="sw-modal" |
div | Define o container do modal |
sw-modal-close |
button | Fecha o modal ao clicar |
.mdl-box |
div | Caixa central do modal |
.mdl-hdr |
div | Cabeçalho com título e botão fechar |
.mdl-ttl |
h4 | Título do modal |
.mdl-cls |
button | Botão X de fechar no cabeçalho |
.mdl-bdy |
div | Área de conteúdo com scroll |
.mdl-ftr |
div | Rodapé com ações |
.is-pp / .is-p / .is-g / .is-gg / .is-fl |
.sw-modal | Tamanhos do modal |
.is-sld |
.sw-modal | Animação slide (padrão: fade + scale) |
.is-act |
.sw-modal | Estado aberto - adicionado automaticamente |