Modal no SWCore — documentação e exemplos

O que é

Mostra conteúdo numa caixa flutuante centralizada ou em formato drawer, escurecendo o restante da página com backdrop-blur. Ideal para confirmações críticas, formulários modais, fluxos de checkout e telas de detalhes sem sair do contexto atual.

Como funciona

O gatilho (sw-modal-open="#id" ou sw-modal="#id") aponta para o ID do modal. Ao abrir, a classe is-active é injetada no .sw-modal e o scroll do <body> é travado automaticamente. Fecha com [sw-modal-close], tecla ESC, clique no fundo escuro ou via API JavaScript SW.Modal.hide().

Exemplos

01 · Abrir Modal nas Cores Semânticas da Marca (com Night & Light) Ao vivo

<div class="demo-row" style="flex-wrap:wrap; gap:0.5rem;">
  <button sw-btn class="sw-btn-pri" sw-modal-open="#modalPri">Primary</button>
  <button sw-btn class="sw-btn-sec" sw-modal-open="#modalSec">Secondary</button>
  <button sw-btn class="sw-btn-suc" sw-modal-open="#modalSuc">Success</button>
  <button sw-btn class="sw-btn-war" sw-modal-open="#modalWar">Warning</button>
  <button sw-btn class="sw-btn-err" sw-modal-open="#modalErr">Error</button>
  <button sw-btn class="sw-btn-inf" sw-modal-open="#modalInf">Info</button>
  <button sw-btn class="sw-btn-nit" sw-modal-open="#modalNit">Night</button>
  <button sw-btn class="sw-btn-lit" sw-modal-open="#modalLit">Light</button>
</div>

<!-- Modais nas cores -->
<div class="sw-modal" id="modalPri"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><span sw-chip class="sw-chip-pri">PRIMARY</span><h3 style="margin-top:0.5rem; color:#38bdf8;">Modal Primary</h3><p>Estilizado com o token <code>--color-primary</code>.</p><div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;"><button sw-btn class="sw-btn-pri" sw-modal-close>Confirmar</button></div></div></div>
<div class="sw-modal" id="modalSec"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><span sw-chip class="sw-chip-sec">SECONDARY</span><h3 style="margin-top:0.5rem; color:#818cf8;">Modal Secondary</h3><p>Estilizado com o token <code>--color-secondary</code>.</p><div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;"><button sw-btn class="sw-btn-sec" sw-modal-close>Confirmar</button></div></div></div>
<div class="sw-modal" id="modalSuc"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><span sw-chip class="sw-chip-suc">SUCCESS</span><h3 style="margin-top:0.5rem; color:#22c55e;">Modal Success</h3><p>Estilizado com o token <code>--color-success</code>.</p><div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;"><button sw-btn class="sw-btn-suc" sw-modal-close>Concluir</button></div></div></div>
<div class="sw-modal" id="modalWar"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><span sw-chip class="sw-chip-war">WARNING</span><h3 style="margin-top:0.5rem; color:#f59e0b;">Modal Warning</h3><p>Estilizado com o token <code>--color-warning</code>.</p><div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;"><button sw-btn class="sw-btn-war" sw-modal-close>Atenção</button></div></div></div>
<div class="sw-modal" id="modalErr"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><span sw-chip class="sw-chip-err">ERROR</span><h3 style="margin-top:0.5rem; color:#ef4444;">Modal Error</h3><p>Estilizado com o token <code>--color-error</code>.</p><div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;"><button sw-btn class="sw-btn-err" sw-modal-close>Entendido</button></div></div></div>
<div class="sw-modal" id="modalInf"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><span sw-chip class="sw-chip-inf">INFO</span><h3 style="margin-top:0.5rem; color:#0ea5e9;">Modal Info</h3><p>Estilizado com o token <code>--color-info</code>.</p><div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;"><button sw-btn class="sw-btn-inf" sw-modal-close>Fechar</button></div></div></div>
<div class="sw-modal" id="modalNit"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><span sw-chip class="sw-chip-nit">NIGHT</span><h3 style="margin-top:0.5rem; color:#f8fafc;">Modal Night</h3><p>Estilizado com superfícies noturnas profundas.</p><div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;"><button sw-btn class="sw-btn-nit" sw-modal-close>Fechar</button></div></div></div>
<div class="sw-modal" id="modalLit"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><span sw-chip class="sw-chip-lit">LIGHT</span><h3 style="margin-top:0.5rem; color:#0f172a;">Modal Light</h3><p>Estilizado com superfícies iluminadas.</p><div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;"><button sw-btn class="sw-btn-lit" sw-modal-close>Fechar</button></div></div></div>

02 · Escala de Tamanhos (PP, P, M, G, GG, CHEIO e Drawer) Ao vivo

<div class="demo-row" style="flex-wrap:wrap; gap:0.5rem;">
  <button sw-btn class="sw-btn-sm sw-btn-out" sw-modal-open="#modalPp">PP (320px)</button>
  <button sw-btn class="sw-btn-sm sw-btn-sec" sw-modal-open="#modalP">P (384px)</button>
  <button sw-btn class="sw-btn-sm sw-btn-pri" sw-modal-open="#modalM">M (576px)</button>
  <button sw-btn class="sw-btn-sm sw-btn-inf" sw-modal-open="#modalG">G (896px)</button>
  <button sw-btn class="sw-btn-sm sw-btn-war" sw-modal-open="#modalGg">GG (1152px)</button>
  <button sw-btn class="sw-btn-sm sw-btn-nit" sw-modal-open="#modalCheio">CHEIO (100%)</button>
  <button sw-btn class="sw-btn-sm sw-btn-suc" sw-modal-open="#modalDrw">Drawer Lateral</button>
</div>

<div class="sw-modal is-pp" id="modalPp"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Tamanho PP (.is-pp)</h3><p>Modal extra pequeno de 320px de largura para alertas mínimos.</p><button sw-btn class="sw-btn-pri sw-btn-sm" style="margin-top:1rem; width:100%;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-p" id="modalP"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Tamanho P (.is-p)</h3><p>Modal pequeno de 384px ideal para confirmações rápidas.</p><button sw-btn class="sw-btn-sec sw-btn-sm" style="margin-top:1rem; width:100%;" sw-modal-close>Entendido</button></div></div>
<div class="sw-modal is-m" id="modalM"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Tamanho M (.is-m / padrão)</h3><p>Modal médio adaptável de até 576px para formulários e diálogos.</p><button sw-btn class="sw-btn-pri sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-g" id="modalG"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Tamanho G (.is-g)</h3><p>Largura de até 896px para formulários de 2 colunas e visualizações detalhadas.</p><button sw-btn class="sw-btn-inf sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Concluir</button></div></div>
<div class="sw-modal is-gg" id="modalGg"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Tamanho GG (.is-gg)</h3><p>Largura ampla de 1152px / 96vw ajustando proporcionalmente à tela para dashboards, tabelas e editores.</p><button sw-btn class="sw-btn-war sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Salvar</button></div></div>
<div class="sw-modal is-cheio" id="modalCheio"><div class="sw-modal-box" style="padding:2.5rem;"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h2>Modal CHEIO (.is-cheio)</h2><p>Preenche toda a tela (100vw / 100vh) com rolagem interna suave e sem bordas arredondadas.</p><button sw-btn class="sw-btn-pri" style="margin-top:1.5rem;" sw-modal-close>Fechar Tela Cheia</button></div></div>
<div class="sw-modal is-drw" id="modalDrw"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Drawer Lateral (.is-drw)</h3><p>Ocupa 100% da altura da tela e desliza a partir da borda direita.</p><button sw-btn class="sw-btn-suc" style="margin-top:1.5rem; width:100%;" sw-modal-close>Fechar Drawer</button></div></div>

03 · Animações de Entrada e Glassmorphism HUD (is-gls, is-zoo, is-flip, is-bnc, is-blr) Ao vivo

<div class="demo-row" style="flex-wrap:wrap; gap:0.5rem;">
  <button sw-btn class="sw-btn-gls sw-btn-sm" sw-modal-open="#modalGls">Glass HUD (is-gls)</button>
  <button sw-btn class="sw-btn-soft sw-btn-pri sw-btn-sm" sw-modal-open="#modalZoo">Zoom (is-zoo)</button>
  <button sw-btn class="sw-btn-soft sw-btn-sec sw-btn-sm" sw-modal-open="#modalSld">Slide de Cima (is-sld)</button>
  <button sw-btn class="sw-btn-soft sw-btn-suc sw-btn-sm" sw-modal-open="#modalSup">Slide de Baixo (is-sup)</button>
  <button sw-btn class="sw-btn-soft sw-btn-war sw-btn-sm" sw-modal-open="#modalFlip">Flip 3D (is-flip)</button>
  <button sw-btn class="sw-btn-soft sw-btn-err sw-btn-sm" sw-modal-open="#modalBnc">Quique (is-bnc)</button>
  <button sw-btn class="sw-btn-soft sw-btn-inf sw-btn-sm" sw-modal-open="#modalBlr">Desfoque (is-blr)</button>
  <button sw-btn class="sw-btn-out sw-btn-sm" sw-modal-open="#modalRot">Giro (is-rot)</button>
</div>

<div class="sw-modal is-gls" id="modalGls"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Glassmorphism HUD</h3><p>Fundo translúcido com reflexo de luz e backdrop-blur de alta fidelidade.</p><button sw-btn class="sw-btn-gls sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-zoo" id="modalZoo"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Zoom (is-zoo)</h3><p>Entra escalando a partir de 50% até 100%.</p><button sw-btn class="sw-btn-pri sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-sld" id="modalSld"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Slide (is-sld)</h3><p>Entra deslizando de cima para o centro.</p><button sw-btn class="sw-btn-sec sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-sup" id="modalSup"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Slide Up (is-sup)</h3><p>Entra deslizando de baixo para cima.</p><button sw-btn class="sw-btn-suc sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-flip" id="modalFlip"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Flip 3D (is-flip)</h3><p>Entra rotacionando em perspectiva 3D.</p><button sw-btn class="sw-btn-war sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-bnc" id="modalBnc"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Quique (is-bnc)</h3><p>Passa do tamanho final e assenta com curva elástica.</p><button sw-btn class="sw-btn-err sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-blr" id="modalBlr"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Desfoque (is-blr)</h3><p>Entra com desfoque de lente e clareia progressivamente.</p><button sw-btn class="sw-btn-inf sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>
<div class="sw-modal is-rot" id="modalRot"><div class="sw-modal-box"><button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button><h3>Giro (is-rot)</h3><p>Entra com leve rotação angular.</p><button sw-btn class="sw-btn-out sw-btn-sm" style="margin-top:1rem;" sw-modal-close>Fechar</button></div></div>

04 · Controle por JavaScript (SW.Modal.show / SW.Modal.hide) Ao vivo

<div class="demo-row">
  <button type="button" class="sw-btn sw-btn-out sw-btn-pri" id="modalJsBtn">
    <i class="swi-terminal" style="margin-right:0.4rem;"></i> Abrir via JavaScript (Auto-fecha em 3s)
  </button>
</div>

<div class="sw-modal" id="modalJs">
  <div class="sw-modal-box" style="text-align:center;">
    <button class="sw-modal-close" sw-modal-close aria-label="Fechar">&times;</button>
    <div style="font-size:2rem; margin-bottom:0.5rem;">⏱️</div>
    <h3>Controle Programático</h3>
    <p>Aberto via <code>SW.Modal.show('#modalJs')</code>. Fechando automaticamente em 3 segundos via <code>SW.Modal.hide()</code>...</p>
    <div style="margin-top:1rem;">
      <span sw-chip class="sw-chip-pri">TIMER ATIVO: 3 SEGUNDOS</span>
    </div>
  </div>
</div>

<script>
  document.getElementById('modalJsBtn')?.addEventListener('click', () => {
    SW.Modal.show('#modalJs');
    setTimeout(() => SW.Modal.hide('#modalJs'), 3000);
  });
</script>

Atributos

sw-modal-open="#id"

no botão ou gatilho — abre o modal com esse ID ao clicar (aceita também só sw-modal="#id")

sw-modal-close

em qualquer elemento dentro do modal — fecha a janela ao clicar (o botão × já vem estilizado no canto superior)

sw-size="VALOR" / sw-w="VALOR"

no container .sw-modal ou na .sw-modal-box — define uma largura personalizada exata (ex: sw-size="640px", sw-size="820px", sw-size="70vw" ou número direto sw-size="600")

Variantes

is-pp (ou is-xs)

PP — Extra Pequeno (max-w-xs / 320px) — alertas mínimos e confirmações diretas

is-p (ou is-sm)

P — Pequeno (max-w-sm / 384px) — prompts rápidos e avisos

is-m (ou is-md / padrão)

M — Médio (max-w-lg / 512px) — formulários balanceados, checkout e diálogos

is-g (ou is-lg)

G — Grande (max-w-3xl / 768px) — formulários de 2 colunas, configurações e tabelas

is-gg (ou is-xl)

GG — Extra Grande (max-w-5xl / 1024px) — dashboards em modal, galerias e relatórios

is-cheio (ou is-fl / is-full)

CHEIO — Tela Cheia (100vw / 100vh) — sem bordas arredondadas e scroll interno

is-drw

Drawer Lateral — entra deslizando da direita ocupando 100% da altura

is-gls

glassmorphism — fundo translúcido com backdrop-blur e brilho HUD

is-zoo

entrada com zoom a partir do centro

is-sld

entrada deslizando suavemente de cima

is-sup

entrada deslizando de baixo para cima

is-l / is-r

entrada deslizando da esquerda ou direita

is-flip

entrada com giro 3D no eixo horizontal

is-bnc

entrada com quique elástico (bounce)

is-blr

entrada com desfoque óptico progressivo

is-rot

entrada com rotação dinâmica suave

Eventos

sw:modal:open

disparado no elemento do modal quando a janela se abre

sw:modal:close

disparado no modal quando a janela se fecha

API (JavaScript)

SW.Modal.show(target, trigger?)

abre o modal por código — target é o seletor (ex: "#meuModal") ou elemento; trigger opcional recebe o foco de volta

SW.Modal.hide(target)

fecha o modal programaticamente

Requisitos

O gatilho sw-modal-open="#id" precisa apontar para um elemento com classe .sw-modal presente no DOM.

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

Não empilha múltiplos modais simultaneamente — ao abrir uma nova janela, feche a anterior para manter o foco e a acessibilidade corretos.

Modal Componentes

O que é

Como funciona

Exemplos

Modal Primary

Modal Secondary

Modal Success

Modal Warning

Modal Error

Modal Info

Modal Night

Modal Light

Tamanho PP (.is-pp)

Tamanho P (.is-p)

Tamanho M (.is-m / padrão)

Tamanho G (.is-g)

Tamanho GG (.is-gg)

Modal CHEIO (.is-cheio)

Drawer Lateral (.is-drw)

Glassmorphism HUD

Zoom (is-zoo)

Slide (is-sld)

Slide Up (is-sup)

Flip 3D (is-flip)

Quique (is-bnc)

Desfoque (is-blr)

Giro (is-rot)