Question

我有和图像的HTML，我想要在每个图像中打开一个模态。到现在为止，它只打开了第一张图片。我搜索，询问，看，但我看不出如何解决它。

    <div class="container">
  <div class="row">
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover ">
        <tr><th colspan=2><H1>Galeria de Imagenes de Temperley Campeon</H1></th></tr>
        <tr>
          <th><img id="myImg" class="img-responsive" data-toggle="modal" data-target="#myModal"src="http://www.efemeridesargentina.com.ar/efemeridesargentina/imagenes/fotos/2958.jpg" alt="Escudo" /></th>

          <th><img class="img-responsive" data-toggle="modal" data-target="#myModal" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlga71WlxI3bKUeuRTfz3vfZXscflVFEt-QiDrUOkpZMscHC_L" alt="Tribuna"/></th>

        <tr>
          <th><img class="img-responsive"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQq5M2F2DC91mP0nKeR6fHFB6BsbN1a9jE_Ky8Q1fRswP8ebMbHnQ" alt="Hinchada"/></th>

          <th><img class="img-responsive"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTN5FMx7lYrcpcKrfwFLKhv9UnoyN3q2frZQF_0N1d2f2BOvnhRDw" alt="Noticias"/></th>
        </tr>

        <tr>
          <th><img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0GQ4sEwUCuwu_D5GGC5JPYmP_y32EAEy-EA277XBaU9zR_63S" alt="Partido"/></th>

          <th><img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSB8MtpdETi2Mj9APZBrh-Ir0AIt_p9NoGRIacO3mMka4hbiwCZw" alt="Festejos"/></th>
        </tr>

        <tr>
          <th><img class="img-responsive"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLVjxE44WPhkxQZAZ9VC6mVsnYkVwWYQCGIx3NbiNlAZUVOFKU6A" alt="Gol"/></th>
        </tr>
  </div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

    // Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

我在CodePen中完成了所有工作，包括Bootstrap和Javascript。链接为https://codepen.io/avezado81/pen/NYprKV

Answer 1

将此作为您的JS代码使用：

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.querySelectorAll(".img-responsive")
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.forEach(function(img){
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
});

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

以前，您只是将onclick事件附加到第一个图像（带有ID）。它需要附加到所有图像

使用bootstrap制作模态

1 个答案: