Utilizando Modais no Bootstrap: Um Guia Completo

Modais são elementos de interface essenciais para exibirr informações adicionais ou solicitar interações do usuário sem sair da página atual. O Bootstrap oferece uma implementação robusta e personalizável de modais.

Estrutura e Atributos Essenciais de um Modal Bootstrap

Um modal é, fundamentalmente, um contêiner div com classes e atributos específicos do Bootstrap para controle de aparência e comportamento.

Atributos Comuns:

  • class="modal fade": Define o estilo base do modal e adiciona um efeito de transição suave (fade). A classe fade pode ser omitida para um aparecimento instantâneo.
  • tabindex="-1": Remove o modal do fluxo de navegação por tabulação padrão da página. Isso garante que a tecla Tab navegue apenas pelos elementos focáveis dentro do próprio modal.
  • role="dialog": Indica aos leitores de tela que o elemento é um diálogo.
  • aria-labelledby="...": Associa o modal a um elemento de título, geralmente um h4 com um ID correspondente.
  • aria-hidden="true": Inicialmente oculta o modal até que seja acionado por um elemento.

Componentes Internos:

  • .modal-dialog: Contêiner principal que gerencia o posicionamento e o tamanho do modal.
  • .modal-content: Contém os elementos visuais do modal (cabeçalho, corpo, rodapé).
  • .modal-header: Área para o título e o botão de fechar.
    • .close: Estiliza o botão de fechar.
    • data-dismiss="modal": Atributo customizado que instrui o Bootstrap a fechar o modal quando clicado.
  • .modal-body: Conteúdo principal do modal.
  • .modal-footer: Área para botões de ação (como "Salvar" ou "Cancelar").

Controle de Tamanho e Fundo:

  • .modal-lg / .modal-sm: Classes para aplicar modais de tamanho grande ou pequeno, respectivamente. Adicionadas à classe .modal-dialog.
  • data-backdrop="static": Impede o fechamento do modal ao clicar no fundo escurecido. Se definido como true (ou omitido, que é o padrão), o clique no fundo fecha o modal.
  • data-keyboard="false": Impede o fechamento do modal ao pressionar a tecla Esc. O padrão é true.

Acionando Modais

Existem duas maneiras principais de exibir modais:

1. Acionamento por Atributos (Estático)

Utilizando atributos HTML em um elemento, como um botão:

  • data-toggle="modal": Indica que o elemento acionará um modal.
  • `data-target="#meuModal"``: Especifica o ID do modal a ser exibido.

Exemplo de Código (Acionamento Estático):


<html lang="pt-BR">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Exemplo de Modal Estático</title>
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Botão que aciona o modal -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exemploModal">
   Abrir Modal Estático
</button>

<!-- Estrutura do Modal -->
<div class="modal fade" id="exemploModal" tabindex="-1" role="dialog" aria-labelledby="meuModalLabel">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
       <h4 class="modal-title" id="meuModalLabel">Título do Modal</h4>
     </div>
     <div class="modal-body">
       Este é o conteúdo do modal que foi aberto estaticamente.
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
       <button type="button" class="btn btn-primary">Salvar</button>
     </div>
   </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- jQuery e Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

2. Acionamento por JavaScript (Dinâmico)

É possível controlar a exibição de modais programaticamente usando jQuery.


// Para exibir um modal específico
$('#idDoModal').modal('show');

// Para esconder um modal específico
$('#idDoModal').modal('hide');

// Para alternar a visibilidade de um modal
$('#idDoModal').modal('toggle');

// Configurando opções ao exibir dinamicamente
$('#idDoModal').modal({
   keyboard: false, // Desabilita fechamento com ESC
   backdrop: false  // Desabilita fechamento ao clicar no fundo
});

Exemplo de Código (Acionamento Dinâmico):


<html lang="pt-BR">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Exemplo de Modal Dinâmico</title>
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Botão que aciona o modal via JavaScript -->
<button id="btnAbrirModal" type="button" class="btn btn-warning">
   Abrir Modal Dinâmico
</button>

<!-- Estrutura do Modal -->
<div class="modal fade" id="modalDinamico" tabindex="-1" role="dialog" aria-labelledby="tituloModalDinamico">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
       <h4 class="modal-title" id="tituloModalDinamico">Modal Aberto por JS</h4>
     </div>
     <div class="modal-body">
       Conteúdo do modal aberto dinamicamente.
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
     </div>
   </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- jQuery e Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
   $('#btnAbrirModal').on('click', function() {
       $('#modalDinamico').modal('show');
   });
});
</script>
</body>
</html>

Eventos de Modal

O Bootstrap dispara eventos que podem ser ouvidos para executar ações personalizadas em diferentes fases do ciclo de vida do modal:

  • show.bs.modal: Disparado antes do modal começar a aparecer.
  • shown.bs.modal: Disparado quando o modal está totalmente visível.
  • hide.bs.modal: Disparado antes do modal começar a desaparecer.
  • hidden.bs.modal: Disparado quando o modal está totalmente oculto.

Exemplo de Manipulação de Eventos:


<html lang="pt-BR">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Exemplo de Eventos de Modal</title>
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Botão que aciona o modal -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalComEventos">
   Abrir Modal com Eventos
</button>

<!-- Estrutura do Modal -->
<div class="modal fade" id="modalComEventos" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
       <h4 class="modal-title">Modal com Eventos</h4>
     </div>
     <div class="modal-body">
       Verifique os alerts para ver os eventos sendo disparados.
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
     </div>
   </div>
 </div>
</div>

<!-- jQuery e Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
   var meuModal = $('#modalComEventos');

   meuModal.on('show.bs.modal', function () {
       alert("Evento: show.bs.modal - Iniciando exibição.");
   });

   meuModal.on('shown.bs.modal', function () {
       alert("Evento: shown.bs.modal - Modal totalmente visível.");
   });

   meuModal.on('hide.bs.modal', function () {
       alert("Evento: hide.bs.modal - Iniciando ocultação.");
   });

   meuModal.on('hidden.bs.modal', function () {
       alert("Evento: hidden.bs.modal - Modal totalmente oculto.");
   });
});
</script>
</body>
</html>

Passando Dados para Modais

É comum precisar passsar informações do elemento que acionou o modal para o conteúdo do próprio modal. Isso pode ser feito utilizando atribtuos data-*.

Método: Atributos Data e Manipulação de Eventos

  1. No elemento que aciona o modal (geralmente um botão), adicione atributos data-* com os dados desejados. Exemplo: data-info="valorExemplo".
  2. No evento show.bs.modal, acesse o botão que disparou o modal usando event.relatedTarget.
  3. Leia os valores dos atributos data-* desse botão.
  4. Utilize esses valores para preencher o conteúdo do modal, por exemplo, em um campo de input.

Exemplo de Código (Passando Dados):


<html lang="pt-BR">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Exemplo de Passagem de Dados para Modal</title>
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Botão que aciona o modal e passa dados -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalComDados" data-usuario="Alice" data-id="123">
   Abrir Modal com Dados
</button>

<!-- Estrutura do Modal -->
<div class="modal fade" id="modalComDados" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button>
       <h4 class="modal-title">Recebendo Dados</h4>
     </div>
     <div class="modal-body">
       <form>
         <div class="form-group">
           <label for="campo-usuario" class="control-label">Usuário:</label>
           <input type="text" class="form-control" id="campo-usuario" readonly>
         </div>
          <div class="form-group">
           <label for="campo-id" class="control-label">ID:</label>
           <input type="text" class="form-control" id="campo-id" readonly>
         </div>
       </form>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
     </div>
   </div>
 </div>
</div>

<!-- jQuery e Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
   $('#modalComDados').on('show.bs.modal', function (event) {
       // Botão que disparou o modal
       var botaoTrigger = $(event.relatedTarget);

       // Extrai informações dos atributos data-*
       var nomeUsuario = botaoTrigger.data('usuario');
       var idUsuario = botaoTrigger.data('id');

       // Encontra os campos no modal e preenche com os dados
       var modal = $(this);
       modal.find('#campo-usuario').val(nomeUsuario);
       modal.find('#campo-id').val(idUsuario);
   });
});
</script>
</body>
</html>

Tags: bootstrap javascript HTML CSS jQuery

Publicado em 10-20 11:54

Tags em Destaque

©2026 Doido Dev