A implementação cobre os cenários mais comuns de Bootstrap/Limitless: modal básico, scroll interno, backdrop bloqueado, tamanho amplo e conteúdo lazy para evitar renderização antecipada.
Básico centralizado
Header colorido, sombra e alinhamento vertical no centro.
Scrollable
Mantém o header fixo e move o conteúdo longo dentro do corpo.
Header contextual
Exemplo curto para confirmar uso de cor sem recriar o template inteiro.
Wide / full on mobile
Boa opção para fluxos com checklist, revisão de dados e múltiplas ações.
Backdrop travado
O usuário só sai pelo botão, útil para confirmação obrigatória.
Lazy content
O conteúdo pesado só entra no DOM quando o modal abre.
{{ modalEventLog }}
{{ t.pages.modal.modalHeading }}
{{ t.pages.modal.modalBody }}
{{ t.pages.modal.scrollableBody }}
{{ t.pages.modal.scrollableLine(index) }}
Este fluxo encontrou registros com saúde crítica. Revise os itens antes de seguir para a publicação.
Sequência recomendada
{{ i + 1 }}
{{ step }}
Quando usar este tamanho
Prefira o modal amplo quando o conteúdo precisa de duas colunas, revisão de tabelas ou múltiplas ações sem quebrar a leitura no desktop.
Este exemplo mantém o backdrop ativo, mas impede fechamento por clique fora e esconde o X do header.
O que este exemplo prova
O conteúdo projetado não é criado enquanto o modal estiver fechado.
Ao abrir, o bloco entra no DOM e pode inicializar tabelas, gráficos ou formulários pesados.