JavaScript模态框关闭按钮失效问题解析与解决方案

div.addEventListener('click', () => {
    modal.style.display = 'block';
    closeModal.style.display = 'block';
});
closeModal.addEventListener('click', () => {
    modal.style.display = 'none';
    closeModal.style.display = 'none';
});

<!-- 这是一个放置所有卡片的容器，例如在HTML文件中定义 -->
<div class="list"></div>

<!-- 每次循环生成的结构示例 -->
<div class="card-wrapper"> <!-- 外部容器，用于包含卡片和模态框 -->
    <div class="card cursor">
      <div class="imageclick"> <!-- 新增的打开模态框触发器 -->
        <img
          src="/src/imgs/no-toy.jpeg"
          class="card-img-top"
          alt="No toy shefilor"
        />
      </div>
      <div class="card-body">
        <h5 class="card-title">No toy shefilor</h5>
        <p class="card-text"> </p>
      </div>
    </div>
    <span class="close">&times;</span>  <!-- 关闭按钮，位于卡片外部但与模态框关联 -->
    <div class="modal"> <!-- 模态框本身 -->
        <img class="modal-content" src="/src/imgs/no-toy.jpeg" alt="Modal content">
        <div id="caption"></div>
    </div>
</div>

// 获取列表容器，假设它在HTML中已存在
const listContainer = document.querySelector('.list');

for (let i = 0; i < 20; i++) {
    const divWrapper = document.createElement('div'); // 更改变量名以避免混淆
    divWrapper.innerHTML = `
    <div class = "card cursor">
      <div class="imageclick"> <!-- 打开模态框的触发器 -->
        <img
          src="/src/imgs/no-toy.jpeg"
          class="card-img-top"
          alt="Placeholder Image"
        />
        </div>
        <div class="card-body">
            <h5 class="card-title">No toy shefilor</h5>
            <p class="card-text"> </p>
        </div>
    </div>
    <span class="close">&times;</span>  <!-- 关闭按钮 -->
    <div class="modal"> <!-- 模态框 -->
        <img class="modal-content" src="/src/imgs/no-toy.jpeg" alt="Modal Image">
        <div id="caption"></div>
    </div>
    `;

    // 获取当前创建的模态框、关闭按钮和图片触发器
    const modal = divWrapper.querySelector('.modal');
    const closeModal = divWrapper.querySelector('.close');
    const imgTrigger = divWrapper.querySelector('.imageclick'); // 专门用于打开模态框的元素

    // 为图片触发器添加点击事件，显示模态框
    imgTrigger.addEventListener('click', () => {
       modal.classList.add('active'); // 添加active类来显示模态框
    });

    // 为关闭按钮添加点击事件，隐藏模态框
    closeModal.addEventListener('click', () => {
        modal.classList.remove('active'); // 移除active类来隐藏模态框
    });

    listContainer.appendChild(divWrapper); // 将整个卡片包装器添加到列表中
}

/* 模态框默认隐藏 */
.modal {
  display: none;
  /* 可以添加其他样式，如固定定位、背景遮罩等 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 位于顶部 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 允许滚动 */
  background-color: rgba(0,0,0,0.7); /* 半透明黑色背景 */
  display: flex; /* 使用flex布局居中内容 */
  align-items: center;
  justify-content: center;
}

/* 当模态框具有active类时显示 */
.modal.active {
  display: flex; /* 或者 block，取决于布局需求 */
}

/* 关闭按钮样式 */
.close {
  position: absolute; /* 相对于父容器定位 */
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 2; /* 确保关闭按钮在模态框之上 */
}

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

/* 模态框内容样式 */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}