如何修改代码实现多个项目卡片模态框的正确显示？

你的核心问题是原代码使用querySelector只会选取第一个匹配元素，无法处理多组模态框。我们需要通过批量获取元素并建立每组模态框的关联关系来解决，具体修改如下：

1. 修改JavaScript代码 #

// Project card modals
const body = document.querySelector('body')

// 遍历所有项目单元格，为每组模态框绑定事件
document.querySelectorAll('.project-cell').forEach(cell => {
  const modal = cell.querySelector('.modal')
  const trigger = cell.querySelector('.trigger')
  const closeButton = cell.querySelector('.close-button')

  function toggleModal() {
    modal.classList.toggle('show-modal')
    updateBodyScroll()
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal()
    }
  }

  // 绑定点击事件
  trigger.addEventListener('click', toggleModal)
  closeButton.addEventListener('click', toggleModal)
  window.addEventListener('click', windowOnClick)
})

// 统一处理页面滚动状态
function updateBodyScroll() {
  // 检查是否有任何模态框处于显示状态
  const anyModalOpen = document.querySelector('.modal.show-modal') !== null
  body.style.overflow = anyModalOpen ? 'hidden' : 'auto'
}

代码修改说明： #

• 用querySelectorAll('.project-cell')获取所有项目单元格，通过forEach循环处理每组元素
• 在每个单元格内查找对应的trigger、modal和closeButton，确保每组元素一一对应
• 重构updateBodyScroll函数，通过检查是否有激活的模态框来统一控制页面滚动，避免多个模态框冲突
• 修复原windowOnClick中的错误：this.event改为event，原写法会导致事件对象获取错误

2. HTML结构（可直接复用多组） #

<div class="projects-container">
  <div class="projects-grid">
    <div class="project-cell">
      <div class="project-tile trigger">
        <img src="card-image.jpg" alt="项目卡片图片" />
      </div>
      <div class="modal">
        <div class="modal-content">
          <div class="close-button">&times;</div>
          模态框内容1
        </div>
      </div>
    </div>
    <div class="project-cell">
      <div class="project-tile trigger">
        <img src="card-image2.jpg" alt="项目卡片图片2" />
      </div>
      <div class="modal">
        <div class="modal-content">
          <div class="close-button">&times;</div>
          模态框内容2
        </div>
      </div>
    </div>
  </div>
</div>

3. CSS样式无需修改 #

原CSS样式已经支持多模态框，保持原样即可：

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(68, 71, 90, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index: 5;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 2rem;
  width: 70%;
  background-color: rgb(40, 42, 54, 0.8);
  border-radius: 5px;
  backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid transparent;
  box-shadow: 0 0 5px 1px var(--dracula-background);
}

.close-button {
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 3px;
  color: black;
  font-weight: 500;
  background-color: rgba(255, 85, 85, 0.7);
  cursor: url('../assets/images/icons/cursor-hand-white.png'), auto;
  position: absolute;
  right: 0;
  top: 0;
  transition: ease all 0.1s;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

关键逻辑说明： #

• 利用project-cell作为父容器，确保每个触发按钮只控制当前单元格内的模态框
• 滚动控制逻辑改为检查页面中是否有任何激活的模态框，避免多个模态框切换时滚动状态异常
• 事件绑定在每个单元格的元素上，不会出现全局元素冲突问题

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