Skip to main content
1 de 2
Felipe
  • 47
  • 1
  • 6

JavaScript para abrir um modal Bootstrap

estou tentando fazer uma página de relatos e estou quebrando cabeça.. rs. O código abaixo funciona, porém são mais de 100 relatos e criar um por um fica complicado.

O que eu gostaria: que tivesse uma única função javascript para abrir a imagem sem ter que identificar pelo ID... ou seja, no caso do código abaixo abrir a imagem1.jpg quando clicar na miniatura dela e abrir a imagem2 ao clicar na miniatura também dela. Estou utilizando um modal para isso.

Outra coisa é que gostaria de não precisar fazer o css para as mais de 100 imagens na miniatura para ficar arredondadas. Isso é possível?

Javascript:

  $(function(){
    $("#abrir-img1").click(function(){
      $("#aberto-img1").modal();
    });
  });
  $(function(){
    $("#abrir-img2").click(function(){
      $("#aberto-img2").modal();
    });

Css (para deixar somente as bordas dessas imagens arredondadas):

#abrir-img1{border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;}
#abrir-img2{border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;}

E o HTML:

                        <h4>Janaína</h4>
                        <p>
                        <img class="btn-primary" id="abrir-img1" src="img/imagem1.jpg"></a><Br><br>
                            Texto 1
                        
                           <div class="modal" id="aberto-img1">
                           <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                 <h2>Enviado por Janaína</h2>
                                </div>
                                <div class="modal-body">
                                  <p align="center"><img src="img/imagem1.jpg" style="width: 100%;">
                              <br><BR>"Texto 1 que vai para o modal"</p>
                                </div>
                                <div class="modal-footer">
                                  <button class="btn btn-danger" data-dismiss="modal">Fechar</button>
                                 </div>
                             </div>
                              </div>
                         </div>

                        <h4>Marcos</h4>
                        <p>
                        <img class="btn-primary" id="abrir-img2" src="img/imagem2.jpg"></a><Br><br>
                            Texto 1
                        
                           <div class="modal" id="aberto-img2">
                           <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                 <h2>Enviado por Janaína</h2>
                                </div>
                                <div class="modal-body">
                                  <p align="center"><img src="img/imagem2.jpg" style="width: 100%;">
                              <br><BR>"Texto 2 que vai para o modal"</p>
                                </div>
                                <div class="modal-footer">
                                  <button class="btn btn-danger" data-dismiss="modal">Fechar</button>
                                 </div>
                             </div>
                              </div>
                         </div>
Felipe
  • 47
  • 1
  • 6