Modals
Dialogos modais com overlay, header/body/footer e botoes de acao. Suporte a confirmacao, formularios, alertas e diferentes layouts de footer.
Estrutura Basica
Titulo do Modal
Conteudo do modal. Aqui voce pode incluir textos, formularios e outros componentes.
<div class="canta-modal-overlay">
<div class="canta-modal">
<div class="canta-modal__header">
<h3>Titulo do Modal</h3>
<button class="canta-modal__close" aria-label="Fechar">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="canta-modal__body">
<p>Conteudo do modal.</p>
</div>
<div class="canta-modal__footer">
<button class="canta-btn canta-btn--outline">Cancelar</button>
<button class="canta-btn canta-btn--primary">Confirmar</button>
</div>
</div>
</div>Confirmacao
Padrao mais comum: cancelar a esquerda, confirmar a direita.
Confirmar acao
Tem certeza que deseja salvar as alteracoes? Esta acao nao pode ser desfeita.
Acao Destrutiva
Para exclusoes e acoes irreversiveis. Botao principal em vermelho.
Excluir registro
Esta acao e permanente
O registro sera excluido e nao podera ser recuperado. Todos os dados relacionados tambem serao removidos.
Com Formulario
Modal com campos de entrada e footer com botoes de salvar/cancelar.
Novo Colaborador
Layouts de Footer
Sem Footer
Para mensagens informativas que nao requerem acao. Apenas fechar via X.
Informacao
Sua solicitacao foi recebida e esta sendo processada. Voce recebera um e-mail de confirmacao em breve.
Protocolo: #2024-04-00781
Sem Header
Minimalista, para alertas simples. Botao de fechar no canto do body.
Sessao expirando
Sua sessao expira em 5 minutos. Deseja continuar conectado?
Sucesso
Feedback positivo apos uma acao bem-sucedida.
Salvo com sucesso!
O registro do colaborador foi atualizado e ja esta disponivel no sistema.
Processando
Modal nao-dismissivel para operacoes em andamento.
Processando...
Gerando relatorio. Isso pode levar alguns segundos.
Conteudo Scrollable
Para termos de uso, politicas ou conteudo longo. Body com scroll, header e footer fixos.
Termos de Uso
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Tamanhos
Small
Confirmacao rapida. Max-width: 400px.
<div class="canta-modal canta-modal--sm">...</div> <!-- 400px -->
<div class="canta-modal">...</div> <!-- 560px (padrao) -->
<div class="canta-modal canta-modal--lg">...</div> <!-- 800px -->
<div class="canta-modal canta-modal--xl">...</div> <!-- 1040px -->
<div class="canta-modal canta-modal--full">...</div> <!-- tela cheia -->Demos Interativas
API
| Classe | Descricao |
|---|---|
.canta-modal-overlay | Fundo escuro cobrindo a tela |
.canta-modal | Container do dialogo |
.canta-modal__header | Cabecalho com titulo e botao fechar (opcional) |
.canta-modal__body | Conteudo principal |
.canta-modal__footer | Rodape com botoes (opcional) |
.canta-modal__close | Botao X no header |
| Tamanhos | |
.canta-modal--sm | 400px |
.canta-modal--md | 560px (padrao) |
.canta-modal--lg | 800px |
.canta-modal--xl | 1040px |
.canta-modal--full | Tela cheia |
| Footer Layout | |
.canta-modal__footer | Botoes alinhados a direita (padrao) |
.canta-modal__footer--between | Botoes espalhados (esquerda + direita) |
.canta-modal__footer--center | Botoes centralizados |
.canta-modal__footer--stack | Botoes empilhados (full width, mobile) |
.canta-modal__footer--start | Botoes alinhados a esquerda |
.canta-modal__footer--clean | Sem background e sem borda |
| Variantes | |
.canta-modal--centered | Body centralizado |
.canta-modal--scrollable | Body com scroll, header/footer fixos |
.canta-modal--header-primary | Header azul |
.canta-modal--header-danger | Header vermelho |