Modal

Modals são caixas de diálogo sobrepostas que capturam a atenção do utilizador para uma tarefa ou informação crítica, bloqueando o acesso ao conteúdo principal até serem fechados.

Exemplo Básico

Clique no botão para abrir um modal padrão do sistema.

Tamanhos Disponíveis

Pequeno (sm)

.modal-sm

Padrão

—

Grande (lg)

.modal-lg

Helper PHP

echo UI::Modal('deleteItem', 'Confirmar Eliminação', 'Tem a certeza que deseja eliminar este item?', [
    'footer' => UI::Button('Confirmar', 'btn-danger') . UI::Button('Cancelar', 'btn-secondary', '', ['data-dismiss' => 'modal'])
]);

Trigger Visual

<button data-toggle="modal" data-target="#deleteItem" class="btn btn-danger">
    Eliminar
</button>

Boas Práticas

Não abuse: Modals interrompem o fluxo do utilizador. Use apenas quando necessário.
Um por vez: Evite abrir modals sobre outros modals (nesting).
Foco: Garanta que o botão de fechar está sempre visível e funcional.