Question

所以我要在div中并排放置一些图像，这些图像要在其自己的Modal弹出窗口中打开，这就是我到目前为止使用的

HTML

        <div id="thumbs">


    <!-- IMG1 popup -->
   <img id="myImg" src="img/img1.jpg" alt="thumbnail" style="width:100%;max- 
   width:150px" />
   <!-- 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>
   <!-- End IMG -->


    <!-- IMG2 popup -->
   <img id="myImg" src="img/img2.jpg" alt="thumbnail" style="width:100%;max- 
   width:150px" />
   <!-- The Modal -->
   <div id="myModal" class="modal">

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

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

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



     </div>

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.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";
}

我已经尝试了几行，但是还是坏了，我已经尝试将整个js块加倍，并且它只加载在第一个js上，也不会显示图像，到目前为止，我只是只能使它只处理一张图像，最终我需要用相同的效果来处理大约32张图像。

    var modalImg = document.getElementById("img01");
    var modalImg = document.getElementById("img02");

Answer 1

您在文档中多次使用相同的ID（不允许使用）。例如：myModal，myImg

为每个图像和模态的ID属性编号，以便它们具有不同的ID。例如：

<img id="myImg1"...
<div id="myModal1"...
<img id="myImg2"...
<div id="myModal2"...

或仅使用一种模态，并根据从图像获得的值更改模态内容。像这样：

<img onclick="insert(this)" class="img" src="img/img1.jpg"...
<img onclick="insert(this)" class="img" src="img/img2.jpg"...
<div id="myModal"...
  <img class="modal-content" id="img">
...

function insert(ctl) {
  modal.style.display = "block";
  modalImg.src = ctl.src;
  captionText.innerHTML = ctl.alt;
}

希望这会有所帮助！

如何让多张图片使用Modal.js？

1 个答案: