Pular para o conteúdo

Exemplo - Modal

Modal

O componente Modal é utilizado para exibir conteúdo em uma camada superior à página atual, focando a atenção do usuário em uma informação ou ação específica.

Exemplo Visual

Clique no botão abaixo para abrir o modal de exemplo.

Modal de Conclusão (Certificado)

Este é o modal exibido quando o aluno completa 100% do curso.

Como Utilizar

1. Criar o Modal

Use a macro ui.modal para definir a estrutura do modal na página.

{% set myContent %}
  <p>Conteúdo HTML aqui...</p>
{% endset %}

{{ ui.modal(id="meu-modal-id", title="Meu Título", content=myContent) }}

2. Criar o Gatilho (Trigger)

Adicione o atributo data-modal-open="ID-DO-MODAL" em qualquer botão ou link.

<button class="btn" data-modal-open="meu-modal-id">
  Abrir Modal
</button>

Parâmetros

  • id (obrigatório): ID único do modal (usado pelo gatilho).
  • title (opcional): Título exibido no cabeçalho do modal.
  • content (obrigatório): Conteúdo HTML a ser exibido no corpo do modal.