Как заставить кнопку закрытия работать на моих модалах

Question

У меня есть 3 полноэкранных модала, которые открываются совершенно нормально, мне просто нужно иметь возможность закрыть их, используя интервал, в котором есть ×, и я не могу заставить модал закрыться после нажатия на крестик.

Я пытался использовать следующее, но, похоже, это не сработало, хотя подобный код работал для нажатия за пределами модального windows (когда они не были полноэкранными)

span.onclick = function(event) {
  if (
   event.target.id == modal1.id ||
   event.target.id == modal2.id ||
   event.target.id == modal3.id
  ) {
    document.getElementById(event.target.id).style.display = "none";
  }
}

HTML

<div class="container flex bg-black-opacity mt-64 rounded pt-10 pb-12 mb-10 mx-auto items-center">
    <div class="container ml-5 cursor-pointer" id='1btn'>
        <img src="assets/img/merch-1.png" alt="" style='height: 400px;' class='shadow-pink'>
        <p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
        <p class="text-white mt-4 ml-1 text-2xl">£15.00</p>

    </div>
    <div id="1mdl" class="modal1">
        <div class="modal-content">
            <span class="close">&times;</span>
            <img src="assets/img/merch-1.png" alt="" style='height: 800px;' class='shadow-pink'>
            <p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
            <p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
        </div>
    </div>
    <div class="container ml-5 cursor-pointer" id='2btn'>
        <img src="assets/img/merch-2.png" alt="" style='height: 400px;' class='shadow-pink'>
        <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black T-Shirt</p>
        <p class="text-white mt-4 ml-1 text-2xl">£10.00</p>

    </div>
    <div id="2mdl" class="modal2">
        <div class="modal-content">
            <span class="close">&times;</span>
            <img src="assets/img/merch-2.png" alt="" style='height: 800px;' class='shadow-pink'>
            <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black T-Shirt</p>
            <p class="text-white mt-4 ml-1 text-2xl">£10.00</p>
        </div>
    </div>
    <div class="container ml-5 mr-5 cursor-pointer" id='3btn'>
        <img src="assets/img/merch-3.png" alt="" style='height: 400px;' class='shadow-pink'>
        <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black Tote Bag</p>
        <p class="text-white mt-4 ml-1 text-2xl">£5.00</p>

    </div>
    <div id="3mdl" class="modal3">
        <div class="modal-content">
            <span class="close">&times;</span>
            <img src="assets/img/merch-3.png" alt="" style='height: 800px;' class='shadow-pink'>
            <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black Tote Bag</p>
            <p class="text-white mt-4 ml-1 text-2xl">£5.00</p>
        </div>
    </div>

</div>

S CSS

/* Merch */
 /* The Modal (background) */
 .modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal3 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  .close {
    color: #fff;
    float: right;
    font-size: 10rem;
  }
  img{
    margin: 0 auto;
    margin-top: 15rem;
    text-align: center;
  }
  background-color: #131B1D;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  border: 1px solid #888;
  width: 100vw;
  height: 100vh;
}

JavaScript

var modal1 = document.getElementById("1mdl");
var modal2 = document.getElementById("2mdl");
var modal3 = document.getElementById("3mdl");

var btn1 = document.getElementById("1btn");
var btn2 = document.getElementById("2btn");
var btn3 = document.getElementById("3btn");

var span = document.getElementsByClassName("close1");

btn1.onclick = function() {
  modal1.style.display = "block";
}
btn2.onclick = function() {
  modal2.style.display = "block";
}
btn3.onclick = function() {
  modal3.style.display = "block";
}

span.onclick = function() {
  modal1.style.display = "none";
}

Answer 1

просто:

document.querySelectorAll('span.close').forEach(sp=>
  {
  sp.onclick=()=> sp.parentNode.parentNode.style.display = "none";
  })

и вся другая часть вашего кода также может быть проще. вот так:

document.querySelectorAll('div.bt4modal').forEach(dv=>
  {
  dv.onclick=()=> document.getElementById(dv.dataset.modalId).style.display = "block";
  })
document.querySelectorAll('span.close').forEach(sp=>
  {
  sp.onclick=()=> sp.parentNode.parentNode.style.display = "none";
  })

.modals {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
  background-color: #131B1D;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  border: 1px solid #888;
  width: 100vw;
  height: 100vh;
}
.modal-content .close {
  color: #fff;
  float: right;
  font-size: 10rem;
}
.modal-content img {
  margin: 0 auto;
  margin-top: 15rem;
  text-align: center;
}
.bt4modal >img {
  height: 400px;
}
.modal-content >img {
  height: 800px;
}

<div class="container flex bg-black-opacity mt-64 rounded pt-10 pb-12 mb-10 mx-auto items-center">
  <div class="container ml-5 cursor-pointer bt4modal" data-modal-id="modal-1">
    <img src="https://picsum.photos/400" alt="" class="shadow-pink">
    <p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
    <p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
  </div>
  <div id="modal-1" class="modals">
    <div class="modal-content">
      <span class="close">&times;</span>
      <img src="https://picsum.photos/800" alt="" class="shadow-pink">
      <p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
      <p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
    </div>
  </div>

  <div class="container ml-5 cursor-pointer bt4modal" data-modal-id="modal-2">
    <img src="https://picsum.photos/400" alt="" class="shadow-pink">
    <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black T-Shirt</p>
    <p class="text-white mt-4 ml-1 text-2xl">£10.00</p>
  </div>
  <div id="modal-2" class="modals">
    <div class="modal-content">
      <span class="close">&times;</span>
      <img src="https://picsum.photos/800" alt="" class="shadow-pink">
      <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black T-Shirt</p>
      <p class="text-white mt-4 ml-1 text-2xl">£10.00</p>
    </div>
  </div>

  <div class="container ml-5 mr-5 cursor-pointer bt4modal" data-modal-id="modal-3">
    <img src="https://picsum.photos/400" alt="" class="shadow-pink">
    <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black Tote Bag</p>
    <p class="text-white mt-4 ml-1 text-2xl">£5.00</p>
  </div>
  <div id="modal-3" class="modals">
    <div class="modal-content">
      <span class="close">&times;</span>
      <img src="https://picsum.photos/800" alt="" class="shadow-pink">
      <p class='uppercase mt-4 text-white'>Vice Versa 2020 Black Tote Bag</p>
      <p class="text-white mt-4 ml-1 text-2xl">£5.00</p>
    </div>
  </div>
</div>