Usando modal no Bootstrap

2023-12-14 10:56:34.880Z

Olá, pessoal. Para aqueles que tiveram dificuldade em usar o modal no bootstrap, estou deixando aqui um resumo de como fazê-lo.

site do bootstrap:

https://getbootstrap.com/

1º lembre-se de instalar o bootstrap no projeto:

   npm i bootstrap@5.3.2

2º Copie os dois links (css e js ) abaixo e colar no arquivo do projeto que você vai usar o modal :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

3º Dentro do site na parte da documentação em componentes você vai procurar a parte modal com os exemplos para você customizar. Eu escolhi o primeiro exemplo e coloquei um id na div pai com nome de "modalForum":

<div class="modal" tabindex="-1" role="dialog" id="modalForum">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

4º Dentro do mesmo html e fora da div do modal você cria um botão com um evento de onClick

 <button onclick="abrirModal()">Abrir Modal</button>

5º Por último. dentro do arqurivo js você vai criar a função "abrirModal()" desta maneira:

<script>
 function abrirModal() {
        new bootstrap.Modal("#modal").show();
      }
</script>

Espero que está explicação tenha ajudado.

Responder5 Curtem

6 respostas

Christian Amsberg Janner @calemao
2023-12-14 17:44:23.185Z
Muito obrigado pelas dicas! Vou usar com certeza, valeu demaissss
Responder 1 Curte
1. Daniel Carvalho @DanielCarvalho
  2023-12-16 14:00:05.142Z
  Nada. Que bom que o post foi útil :D
  Responder
Em resposta aDanielCarvalho⬆:
Luiza Ferreira @luizaferreirafonseca
2023-12-14 18:47:21.236Z
Muito obrigada pela sua explicação! Quando estava fazendo o desafio da Imã, fiquei bastante na dúvida de como usar o modal do Boostrap, mas pelo visto temos que instalar ele no editor mesmo, né?

O Bootstrap é interessante porque oferece vários estilos para modais e o melhor é que são responsivos!
Responder 1 Curte
1. Daniel Carvalho @DanielCarvalho
  2023-12-16 14:09:14.529Z
  sim, tem que instalar o link do script tbm. Inclusive se você quiser usar o modal em angular é só habilitar o "script" no mesmo caminho que o professor ensinou na na aula do dia 6/12 para habilitar o bootstrap "styles" no arquivo angular.json.
  Responder
Em resposta aDanielCarvalho⬆:
Marcele Eller Gusmão Moura @marceleeller
2023-12-18 13:21:46.749Z
Uma outra maneira de habilitar o modal é fazer como está na documentação do bootstrap, que é colocando algumas propriedades na tag do botão:

data-toggle="modal" data-target="#exampleModalLong"

Ficaria assim:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> Botão para abrir o modal </button>
Responder
1. Daniel Carvalho @DanielCarvalho
  2023-12-18 16:23:48.182Z
  Verdade, @marceleeller. A maneira que coloquei é de versões anteriores. Obrigado pela contrubuição.
  Responder 1 Curte

ResponderAdd progress note