如何用JavaScript实现点击不同图片弹出对应模态框

你的代码核心问题在于重复使用唯一ID以及冗余的模态框结构，以下是最简适配方案：

问题分析 #

1. HTML中id="myImg"和id="myModal"被重复使用，getElementById只会返回第一个匹配元素，导致后续图片无响应。
2. JS中重复赋值modalImg，后赋值会覆盖前一个，完全无效。
3. 每个图片单独套模态框属于冗余结构，一个模态框即可复用显示所有图片。

修改后的完整代码 #

HTML（简化结构，复用单个模态框）

<div>
  <img src="https://picsum.photos/id/237/150/150" class="myImg">
  <img src="https://picsum.photos/id/137/150/150" class="myImg">
</div>

<!-- 全局唯一模态框 -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="modalImg">
</div>

CSS（将ID选择器改为类选择器）

.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  margin: 0 10px 10px 0; /* 增加间距，可选 */
}

.myImg:hover {
  opacity: 0.7;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from { transform: scale(0) }
  to { transform: scale(1) }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

JS（批量绑定事件，复用模态框）

// 获取全局元素
const modal = document.getElementById("myModal");
const modalImg = document.getElementById("modalImg");
const closeBtn = document.querySelector(".close");
const imgs = document.querySelectorAll(".myImg");

// 为所有图片绑定点击事件
imgs.forEach(img => {
  img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src; // 将当前点击图片的src赋值给模态框图片
  }
});

// 关闭模态框
closeBtn.onclick = function() {
  modal.style.display = "none";
}

// 点击模态框背景也关闭（可选增强）
window.onclick = function(event) {
  if (event.target === modal) {
    modal.style.display = "none";
  }
}

关键优化点 #

• 用类选择器替代重复ID，确保所有图片能被JS获取。
• 复用单个模态框，避免冗余DOM结构，提升性能。
• 通过querySelectorAll批量获取图片，用forEach循环绑定事件，无需为每张图单独写代码。
• 修复了原CSS中modal-content,的语法错误（多余逗号）。

内容的提问来源于stack exchange，提问作者Daniel