Javascript 用bootstrap生成模态

我有和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";
}

坦佩雷坎佩恩酒店
&时代；
关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}

---

我用代码笔完成了所有的工作，包括引导和Javascript。链接是

将其用作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";
}

//获取模式
var modal=document.getElementById（'myModal'）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.queryselectoral（“.img响应”）
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
img.forEach（函数（img）{
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
}
});
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}

---

之前，您仅将onclick事件附加到第一个图像（具有ID）。它需要附加到所有图像

这是在您的代码笔中测试的。您还需要调整css以获得悬停效果和指针光标，或者您可以解释一下

我想要一个在每个图像中打开的模式

？