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
Y2Modal.show('#meuModal');
Y2Modal.hide('#meuModal');
// Evento disparado ao abrir
document.querySelector('#meuModal')
.addEventListener('yd:modal:open', () => console.log('abriu'));
Quick Reference
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
y2modal="#id" |
button | Abre o modal pelo seletor |
y2modal |
div | Define o container do modal |
y2modal-cls |
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 |
[y2modal] | Tamanhos do modal |
.is-sld |
[y2modal] | Animação slide (padrão: fade + scale) |
.is-act |
[y2modal] | Estado aberto - adicionado automaticamente |