模态窗口中span关闭失效问题排查及解决方案咨询

核心问题排查 #

你的代码里有几个关键问题导致关闭按钮无法触发：

1. CSS选择器不匹配+语法错误

   • 你的CSS里用了.container .popup-image，但HTML里弹窗的popup-image是在.imageContainer下，这会导致弹窗的样式完全不生效，包括关闭按钮的位置、大小都不对。
   • 关闭按钮的CSS写了font-size: bolder，这是错误的——bolder是font-weight（字体粗细）的属性值，不是font-size的，这会导致按钮要么显示极小，要么根本看不到，自然点不动。

2. 事件范围太广导致冒泡冲突
   你用document.querySelectorAll('.imageContainer div')给所有.imageContainer下的div绑定了弹窗打开事件，而弹窗本身也是.imageContainer的子div。当你点击关闭按钮时，事件会冒泡到弹窗div上，触发打开弹窗的逻辑，结果就是刚关闭又立刻打开，看起来像没触发关闭。

3. 图片赋值语法错误（不影响关闭但需修复）
   JS里写的document.querySelector('.popup-image img').div = ...是错的，应该用.src来设置图片地址，不然弹窗里的图片不会切换。

修复方案 #

1. 修正CSS代码

调整选择器匹配HTML结构，同时修复字体属性错误：

/* modal */

.imageContainer .popup-image {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.641);
  height: 100%;
  width: 100%;
  z-index: 100;
  display: none;
}

.imageContainer .popup-image span {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 40px; /* 设置合适的按钮大小 */
  font-weight: bolder; /* 修正字体粗细属性 */
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

.imageContainer .popup-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid #fff;
  width: 750px;
  object-fit: cover;
}

@media only screen and (max-width: 600px) {
  .imageContainer .popup-image img {
    width: 99%;
  }
}

2. 缩小弹窗触发的事件范围

只给带data-img属性的图片容器绑定打开事件，避免无关元素触发：

document.querySelectorAll('.imageContainer div[data-img]').forEach(image => {
  image.onclick = () => {
    document.querySelector('.popup-image').style.display = 'block';
    document.querySelector('.popup-image img').src = image.getAttribute('data-img'); // 修正图片赋值
  }
});

document.querySelector('.popup-image span').onclick = () => {
  document.querySelector('.popup-image').style.display = 'none';
};

如果不想修改事件范围，也可以在关闭事件里阻止冒泡：

document.querySelector('.popup-image span').onclick = (e) => {
  e.stopPropagation(); // 阻止事件冒泡到父级div
  document.querySelector('.popup-image').style.display = 'none';
};

完整修正后代码 #

HTML（无需修改）

<div class="imageContainer">
  <div class="entry work-entry branding">
    <div class="entry-image image imageBG" data-img="./src/assets/img/feature1.jpeg">
    </div>
    <div class="work-entry-hover">
      <div class="work-entry-content">
        <div class="work-entry-title">Brand</div>
        <div class="work-entry-cat">Los Angeles, CA</div>
      </div>
    </div>
  </div>

  <!-- modal -->
  <div class="popup-image">
    <img src="./src/assets/img/feature1.jpeg" alt="">
    <span>&times;</span>
  </div>
</div>

内容的提问来源于stack exchange，提问作者operator-19