Javascript 如何将一个网页上的多个图像加载到modal中

我的网页上有两个图像，我正在尝试将它们加载到全屏模式中。例如，单击第一个图像，它将全屏显示，关闭第一个图像，然后单击第二个图像，它将全屏显示。我可以让它与一个单一的图像，但第二个图像将不会加载到模式。我已经尝试将第二个图像id更改为myImg2和所有变量，这允许加载第二个图像，但是模式将不会关闭。我应该也发布css代码吗

<img id="myImg" src="images/analysis.PNG" alt="" style="width:100%;max-width:400px"> 
<img id="myImg" src="images/design.PNG" alt="" style="width:100%;max-width:400px">    

    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" class="responsive" id="img01">
      <div id="caption"></div>
    </div>

  <script>
      // 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";
        }
  </script>

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

在您的示例中，两个图像都具有相同的ID，这可能是您无法访问第二个图像的原因。Javascript将查询DOM并返回第一个元素，其ID为document.getElementById方法中提供的ID

---

如果您想查询多个元素，可以尝试document.querySelector并传入任何您喜欢的css选择器，如类名等。但在DOM中始终有两个相同的id是一个坏主意

当您按id获取元素时，您只能检索一个元素，因为id是uniqe。您要做的是

document.getElementByClassName（）

，以便您可以通过索引访问它

<img class="myImg" src="images/analysis.PNG" alt="" style="width:100%;max-width:400px">
<img class="myImg" src="images/design.PNG" alt="" style="width:100%;max-width:400px">

<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" class="responsive" id="img01">
    <div id="caption"></div>
</div>

<script>
    // 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.getElementsByClassName('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    for(var i = 0;i<img.length;i++){
    img[i].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";
    }
</script>

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

按类更改图像id，如

class=“myImg”

。在代码中，您使用的id总是唯一的，因此JavaScript只获取id为myImg的第一个图像。因此，它只显示第一幅图像的模型，而不显示第二幅图像的模型。试试这个JavaScript代码

  // 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('.myImg');
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");



     for(var i = 0;i<img.length;i++){
img[i].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.querySelectorAll（'.myImg'）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
对于（var i=0；i）元素，关闭模态
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}

我已尝试将第二个图像id更改为myImg2和所有变量，这允许加载第二个图像，但模式不会关闭。我不熟悉hmtl、css和javascript