跨度不会在模式窗口中关闭答案

【问题标题】：Span does not close in modal window跨度不会在模式窗口中关闭
【发布时间】：2023-02-03 11:56:28
【问题描述】：

我不太确定为什么 span 标签没有关闭

这与我选择的是js中的div有关吗？

请让我知道为了使这项工作我可以改变什么。

我尝试切换类的标签并测试选择器

这是我的代码。

document.querySelectorAll('.imageContainer div').forEach(image => {
  image.onclick = () => {
    document.querySelector('.popup-image').style.display = 'block';
    document.querySelector('.popup-image img').div = image.getAttribute('data-img');
  }
});

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

/* modal */

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

.container .popup-image span {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: bolder;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

.container .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) {
  .container .popup-image img {
    width: 99%;
  }
}

<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>

【问题讨论】：

标签： javascript html css modal-dialog

【解决方案1】：

由于“x”按钮位于另一个元素内，因此当您单击跨度时将调用设置 display: block 的函数，这将覆盖您正在设置的 display: none;。您可以通过在事件处理程序中运行 e.stopPropagation(); 来停止此操作，这将阻止点击事件在任何父元素上触发。

document.querySelectorAll('.imageContainer div').forEach(image => {
  image.onclick = () => {
    document.querySelector('.popup-image').style.display = 'block';
    document.querySelector('.popup-image img').div = image.getAttribute('data-img');
  }
});

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

/* modal */

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

.container .popup-image span {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: bolder;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

.container .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) {
  .container .popup-image img {
    width: 99%;
  }
}

<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>

【讨论】：