O componente Modal do Bootstrap é uma ferramenta útil para exibir conteúdos interativos, como formulários de login, galerias de imagens ou alertas. Modais são basicamente caixas de diálogo que aparecem sobre o conteúdo principal e exigem interação do usuário para serem fechadas. Podem ser ativados por diferentes eventos, como cliques em botões, links ou funções JavaScript.

Principais Características

Os modais do Bootstrap oferecem tamanhos personalizáveis, animações, fundos e posicionamento. Eles suportam vários tipos de conteúdo e podem ser acionados por diferentes eventos. Também são acessíveis para todos os usuários e podem ser aprimorados com a adição de atributos ARIA e gerenciamento de foco.

Classes de Uso

• modal: Classe base para criar um diálogo modal;
• modal-dialog: Contêiner para o conteúdo do modal;
• modal-content: Envolve o cabeçalho, corpo e rodapé do modal;
• modal-header: Contêiner para o título do modal e botão de fechar opcional;
• modal-title: Estiliza o título do modal;
• modal-body: Contêiner para o conteúdo principal do modal;
• modal-footer: Contêiner para botões ou conteúdo adicional no rodapé do modal;
• fade: Aplica uma animação de transição suave ao modal;
• modal-dialog-centered: Centraliza o modal verticalmente na janela de visualização;
• modal-static: Impede que o modal seja fechado ao clicar fora dele ou pressionar a tecla Escape.

Exemplo 1: Modal Básico

Exemplo 2: Modal Animado