模态砌体

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>

已更新以向图像添加标题（悬停时显示）- 根据评论

模态砌体

Masonry with modal

javascript

modal-dialog

lightbox