带模态砌体

Question

当我点击砖石上的图片时，我试图打开一个模态。

我把所有的代码放在一起，我得到了这个结果，但问题是，只有当我在一个图像上放置一个id时，这个模型才能工作。如果我把相同的id放在另一个图像上，模式就不能工作。

我需要让模式工作在所有的图像，而不仅仅是一个。有什么建议吗？

​

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

<!-- masonry html -->
<div class="P-portfolio-masonry-cont cont-1400 m-a mb-125">
  <div class="P-portfolio-m-c-foto">
    <img id="myImg" src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
  </div>
</div>


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

​

Answer 1

您需要将onClick添加到所有元素(图像)中--id在DOM中应该是唯一的，但是您可以使用classes。

// this returns a collection of elements (
var imgArray = document.getElementsByClassName("thumb");

// iterate thru the collection and add event listener
for (let img of imgArray) {
  img.onclick = function() {
    console.log(this.alt);
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
  }
};

​

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

for (let img of imgArray) {
  img.onclick = function() {
    console.log(this.alt);
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.title = this.title;
    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";
}

.thumb {
  width: 200px;
  height: 300px;
  display: inline-block;
}

<!-- masonry html -->
<div class="P-portfolio-masonry-cont cont-1400 m-a mb-125">
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="A windmill"  alt="A windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="B windmill" alt="b windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="C windmill" alt="c windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/suspension-bridge.jpg" title="D windmill" alt="d windmill" />
  </div>
  <div class="P-portfolio-m-c-foto">
    <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="F windmill" alt="f windmill" />
  </div>
</div>


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

​

更新以添加图片标题(在悬停时显示)-每个注释