如何为JavaScript动态生成的图库图片添加Modal（模态框）

1. 准备模态框基础结构 #

直接在页面里写好模态框骨架（默认隐藏）：

<!-- 模态框容器 -->
<div class="modal" id="imageModal">
  <!-- 模态框内容区 -->
  <div class="modal-content">
    <!-- 关闭按钮 -->
    <span class="close">&times;</span>
    <!-- 放大显示的图片 -->
    <img class="modal-image" id="modalImage">
    <!-- 图片标题 -->
    <p class="modal-title" id="modalTitle"></p>
  </div>
</div>

2. 添加模态框基础样式 #

给模态框加上覆盖全屏的样式，确保默认隐藏：

/* 模态框背景层 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  overflow: auto;
}

/* 模态框内容容器 */
.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
  text-align: center;
}

/* 关闭按钮样式 */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

/* 标题样式 */
.modal-title {
  color: #fff;
  margin-top: 15px;
}

3. 修改JS代码实现点击触发逻辑 #

针对动态生成的图片，有两种绑定点击事件的方式：

方式一：生成图片时直接绑定（适合少量图片）

在生成每个图片容器的循环内，直接给template添加点击事件：

// 获取模态框相关元素
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
const modalTitle = document.getElementById('modalTitle');
const closeBtn = document.querySelector('.close');

// 关闭模态框函数
function closeModal() {
  modal.style.display = "none";
}

// 绑定关闭事件
closeBtn.onclick = closeModal;
modal.onclick = function(e) {
  if (e.target === modal) closeModal();
}

function showImages() {
  while(gallery.firstChild) gallery.removeChild(gallery.firstChild)
  
  var offset = (page - 1) * perPage;
  var dots = document.querySelectorAll('.gallery-dot');
  
  for (var i = 0; i < dots.length; i++){
    dots[i].classList.remove('active');
  }
  
  dots[page - 1].classList.add('active');
  
  for (var i = offset; i < offset + perPage; i++) {
    if ( images[i] ) {
      var template = document.createElement('div');
      var title = document.createElement('p');
      var titleText = document.createTextNode(images[i].title);
      var img = document.createElement('img');
      
      template.classList.add('template')
      img.setAttribute("src", images[i].source);
      img.setAttribute('alt', images[i].title);

      title.appendChild(titleText);
      template.appendChild(img);
      template.appendChild(title);
      gallery.appendChild(template);

      // 给当前图片容器绑定点击事件
      template.onclick = function() {
        const currentImg = this.querySelector('img');
        const currentTitle = this.querySelector('p').textContent;
        // 填充模态框内容
        modalImg.src = currentImg.src;
        modalImg.alt = currentImg.alt;
        modalTitle.textContent = currentTitle;
        // 显示模态框
        modal.style.display = "block";
      }
    }
  }
  
  // 动画逻辑保留
  var galleryItems = document.querySelectorAll('.template')
  for (var i = 0; i < galleryItems.length; i++) {
    var onAnimateItemIn = animateItemIn(i);
    setTimeout(onAnimateItemIn, i * 100);
  }
  
  function animateItemIn(i) {
    var item = galleryItems[i];
    return function() {
      item.classList.add('animate');
    }
  }
  
  pageIndicator.textContent = "Page " + page + " of " + pages;
  
}

showImages();

方式二：事件委托（适合大量/分页加载的图片）

只给父容器gallery绑定一次点击事件，通过判断点击目标来触发模态框，避免重复绑定：

// 获取模态框相关元素
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImage');
const modalTitle = document.getElementById('modalTitle');
const closeBtn = document.querySelector('.close');

// 关闭模态框函数
function closeModal() {
  modal.style.display = "none";
}

// 绑定关闭事件
closeBtn.onclick = closeModal;
modal.onclick = function(e) {
  if (e.target === modal) closeModal();
}

// 事件委托：给gallery绑定点击事件
gallery.addEventListener('click', function(e) {
  // 判断点击的是否是图片
  const targetImg = e.target.closest('img');
  if (targetImg) {
    const template = targetImg.closest('.template');
    const currentTitle = template.querySelector('p').textContent;
    // 填充模态框内容
    modalImg.src = targetImg.src;
    modalImg.alt = targetImg.alt;
    modalTitle.textContent = currentTitle;
    // 显示模态框
    modal.style.display = "block";
  }
});

// 原showImages函数保留，去掉循环内的template.onclick即可
function showImages() {
  while(gallery.firstChild) gallery.removeChild(gallery.firstChild)
  
  var offset = (page - 1) * perPage;
  var dots = document.querySelectorAll('.gallery-dot');
  
  for (var i = 0; i < dots.length; i++){
    dots[i].classList.remove('active');
  }
  
  dots[page - 1].classList.add('active');
  
  for (var i = offset; i < offset + perPage; i++) {
    if ( images[i] ) {
      var template = document.createElement('div');
      var title = document.createElement('p');
      var titleText = document.createTextNode(images[i].title);
      var img = document.createElement('img');
      
      template.classList.add('template')
      img.setAttribute("src", images[i].source);
      img.setAttribute('alt', images[i].title);

      title.appendChild(titleText);
      template.appendChild(img);
      template.appendChild(title);
      gallery.appendChild(template);
    }
  }
  
  // 动画逻辑保留
  var galleryItems = document.querySelectorAll('.template')
  for (var i = 0; i < galleryItems.length; i++) {
    var onAnimateItemIn = animateItemIn(i);
    setTimeout(onAnimateItemIn, i * 100);
  }
  
  function animateItemIn(i) {
    var item = galleryItems[i];
    return function() {
      item.classList.add('animate');
    }
  }
  
  pageIndicator.textContent = "Page " + page + " of " + pages;
  
}

showImages();

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