Modal Componentes

O que é

O modal é aquela janelinha que aparece no meio da tela e escurece o resto: "Tem certeza que quer excluir?", "Deixe seu e-mail", "Veja os detalhes do plano". Você escreve a janela no HTML (ela fica escondida) com sw-modal e um id, e em qualquer botão da página coloca sw-modal-open="#id". Dentro, peças prontas: cabeçalho com título e ×, corpo e rodapé com os botões. Com palavras no valor de sw-modal você escolhe o tamanho, o jeito de entrar (deslizando, com zoom, como gaveta lateral) e o vidro.

O JavaScript do núcleo abre e fecha a janela colocando a classe is-active. Enquanto aberta: a rolagem da página trava, a tecla Tab fica presa dentro da janela, e ela fecha com Esc, com clique no fundo escuro, no × (sw-modal-cls) ou em qualquer coisa marcada com sw-modal-close. Ao fechar, o foco volta para o botão que abriu. Leitores de tela já recebem role="dialog" e aria-modal. Funciona no tema claro e no escuro.

Quando usar

• Confirmar ação importante: excluir, cancelar pedido, sair sem salvar.
• Formulário curto sem sair da página: newsletter, "me ligue", login rápido.
• Detalhes que não cabem no cartão: descrição de plano, política de troca, vídeo.
• Para aviso rápido que some sozinho, use o Alerta. Para painel lateral de filtros/carrinho, prefira o Panel.

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O modal precisa dos dois.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Escreva o botão com sw-modal-open="#id" e a janela com o mesmo id. O × e o "Cancelar" fecham porque têm sw-modal-close. Clique para testar.

   Agendar visita

   Agendar visita

   Escolha um horário e um corretor entra em contato para confirmar.

   Cancelar Quero agendar

   <button type="button" sw-btn="pri" sw-modal-open="#agendar">Agendar visita</button>
   
   <div sw-modal id="agendar">
     <div sw-modal-box>
       <div sw-modal-hdr>
         <h4 sw-modal-ttl>Agendar visita</h4>
         <button type="button" sw-modal-cls sw-modal-close aria-label="Fechar"></button>
       </div>
       <div sw-modal-bdy><p>Escolha um horário e um corretor entra em contato para confirmar.</p></div>
       <div sw-modal-ftr>
         <button type="button" sw-btn="ghost" sw-modal-close>Cancelar</button>
         <button type="button" sw-btn="pri" sw-modal-close>Quero agendar</button>
       </div>
     </div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<button type="button" sw-btn="err out" sw-modal-open="#excluir"><i class="swi-trash"></i> Excluir cliente</button>

<div sw-modal="p sld" id="excluir">
  <div sw-modal-box>
    <div sw-modal-hdr>
      <h4 sw-modal-ttl>Excluir "Maria Souza"?</h4>
      <button type="button" sw-modal-cls sw-modal-close aria-label="Fechar"></button>
    </div>
    <div sw-modal-bdy><p>O histórico de agendamentos dela também será apagado. Não dá para desfazer.</p></div>
    <div sw-modal-ftr>
      <button type="button" sw-btn="ghost" sw-modal-close>Manter</button>
      <button type="button" sw-btn="err" id="confirmar-exclusao"><i class="swi-trash"></i> Excluir de vez</button>
    </div>
  </div>
</div>

<script>
  document.getElementById('confirmar-exclusao').addEventListener('click', async () => {
    await fetch('/admin/clientes/42', { method: 'DELETE' });
    SW.Modal.hide('#excluir');
    SW.Alert.ok('Cliente excluído.');
  });
</script>

<button type="button" sw-btn="suc" sw-modal-open="#me-liga"><i class="swi-phone"></i> Quero que me liguem</button>

<div sw-modal="p" id="me-liga">
  <div sw-modal-box>
    <div sw-modal-hdr>
      <h4 sw-modal-ttl>A gente te liga</h4>
      <button type="button" sw-modal-cls sw-modal-close aria-label="Fechar"></button>
    </div>
    <form sw-frm action="/me-liga" method="post">
      <div sw-fld><label for="nome">Nome</label><input sw-inp id="nome" name="nome" autofocus></div>
      <div sw-fld><label for="tel">Telefone</label><input sw-inp id="tel" name="tel" type="tel"></div>
      <div sw-modal-ftr><button type="submit" sw-btn="suc">Pedir ligação</button></div>
    </form>
  </div>
</div>

<div sw-modal="p zoo" id="promo">
  <div sw-modal-box>…Cupom BEMVINDO10…</div>
</div>

<script>
  document.addEventListener('sw:ready', () => {
    if (localStorage.getItem('promo-vista')) return;
    setTimeout(() => SW.Modal.show('#promo'), 3000);   // abre depois de 3 segundos
    localStorage.setItem('promo-vista', '1');
  });
</script>

const video = document.getElementById('modal-video');

video.addEventListener('sw:modal:open', () => {
  video.querySelector('video').play();
});
video.addEventListener('sw:modal:close', () => {
  video.querySelector('video').pause();   // não deixa o vídeo tocando escondido
});

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js.
• swcore.compl.min.css — só se usar ícones swi-* nos botões.

Cuidados — erros comuns

• sw-modal-open sem o # (sw-modal-open="aviso"): não abre. Tem que ser "#aviso".
• Dois modais com o mesmo id: o botão sempre abre o primeiro.
• Botão "Salvar" dentro de um <form> no modal com sw-modal-close: fecha antes de você tratar o envio. Feche pelo código (SW.Modal.hide) depois de salvar.
• Usar SWModal.show(): o nome certo é SW.Modal.show().

O que ele não faz

• Não dá para impedir o fechamento pelo fundo escuro ou pelo Esc (não existe modo "obrigatório").
• Não abre um modal dentro de outro de forma organizada (o segundo fica por cima, mas o Esc fecha os dois).
• Não carrega conteúdo de outra página sozinho: o HTML da janela precisa estar na página (ou ser colocado por você antes de abrir).