Im not really sure why the span tag is not closing

Does it have to do with my selection being a div in js?

Please let me know what I can change in order to make this work.

Ive tried to switch out the labels of the classes and tested selectors as well

Here is my code.

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 >
  <div >
    <div  data-img="./src/assets/img/feature1.jpeg">
    </div>
    <div >
      <div >
        <div >Brand</div>
        <div >Los Angeles, CA</div>
      </div>
    </div>
  </div>

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

CodePudding user response：

Since the 'x' button is inside the other element, the function to set display: block is being called when you click on the span, which is overriding the display: none; that you're setting. You can stop this by running e.stopPropagation(); in the event handler, which will prevent the click event from triggering on any parent elements.

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 >
  <div >
    <div  data-img="./src/assets/img/feature1.jpeg">
    </div>
    <div >
      <div >
        <div >Brand</div>
        <div >Los Angeles, CA</div>
      </div>
    </div>
  </div>

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