Javascript to open a Bootstrap modal

Question

I am trying to make a page of reports and I am breaking my head.. rs. The code below works, but there are more than 100 reports and creating one by one is complicated.

What I would like: that you have a single javascript function to open the image without having to identify it by the ID... that is, in the case of the code below open the image1.jpg when you click on its thumbnail and open the imagem2 by clicking on the thumbnail also of it. I’m using a modal for this.

Another thing is that I would like to not need to css to the more than 100 thumbnail images to be rounded. This is possible?

Javascript:

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

Css (to leave only the edges of these rounded images):

#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;}

And the 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>

Answer 1

One thing wrong with your HTML is that you cannot put Divs inside the tag <p> how are you doing.

Regarding a generic function, you can place each block of HTML referring to modals within a parent div and add a specific class to each thumbnail. For example, I added the class .abrirmodal in each thumbnail:

<img class="btn-primary abrirmodal" src="img/imagem1.jpg"></a><Br><br>
                             ↑

This way it is easy to take the click on all thumbnails and open the modal related to it by the class .modal that is within the same father div. See:

$(function(){
   $(".abrirmodal").click(function(){
      $(this).closest("div").find(".modal").modal();
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div>
   <h4>Janaína</h4>
   <img class="btn-primary abrirmodal" src="img/imagem1.jpg"></a><Br><br>
   Texto 1
   <div class="modal">
      <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%;"></p>
               <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>
</div>

<div>
   <h4>Marcos</h4>
   <img class="btn-primary abrirmodal" src="img/imagem2.jpg"></a><Br><br>
   Texto 1
   <div class="modal">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h2>Enviado por Marcos</h2>
            </div>
            <div class="modal-body">
               <p align="center"><img src="img/imagem2.jpg" style="width: 100%;"></p>
               <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>
</div>