Как настроить модальное окно?

Question

[Алексей]

Создал 1 модальное окно и хотел просто насоздавать его копий для всех картинок, но модальное окно в таком случае открывается, но не нажимается уже крестик. понял, что нужно через addlistener делать, но я новичок в этом деле, и не понимаю как это сделать

<div class = "row">
    <!--<div class="container">-->
    <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock1.jpg" alt="Текст 1">
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button id="myBtn" style="color: white;">About App</button>
          <div id="myModal" class="modal">
            <div class="modal-content">
              <span class="close">&times;</span>
              <h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita amet ea fugiat consequatur hic dolore, illum, architecto officia nam perferendis recusandae nisi. Iste quo nulla, veniam quibusdam minus excepturi modi.</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock2.jpg" alt="Текст 2">
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button id="myBtn2">About App</button>
          <div id="myModal2" class="modal">
            <div class="modal-content">
              <span class="close">&times;</span>
              <h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita amet ea fugiat consequatur hic dolore, illum, architecto officia nam perferendis recusandae nisi. Iste quo nulla, veniam quibusdam minus excepturi modi.</h6>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock3.jpg" alt="Текст 3">
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button id="myBtn3">About App</button>
          <div id="myModal3" class="modal">
            <div class="modal-content">
              <span class="close">&times;</span>
              <h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita amet ea fugiat consequatur hic dolore, illum, architecto officia nam perferendis recusandae nisi. Iste quo nulla, veniam quibusdam minus excepturi modi.</h6>

            </div>
          </div>
        </div>
      </div>
    </div>
</div>
<div class = "row">
  <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock5.jpg" alt="Текст 4">
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button id="myBtn4">About App</button>
          <div id="myModal4" class="modal">
            <div class="modal-content">
              <span class="close">&times;</span>
              <h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita amet ea fugiat consequatur hic dolore, illum, architecto officia nam perferendis recusandae nisi. Iste quo nulla, veniam quibusdam minus excepturi modi.</h6>
            </div>
          </div>
        </div>
      </div>
  </div>
  <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock4.jpg" alt="Текст 5">
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button id="myBtn5">About App</button>
          <div id="myModal5" class="modal">
            <div class="modal-content">
              <span class="close">&times;</span>
              <h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita amet ea fugiat consequatur hic dolore, illum, architecto officia nam perferendis recusandae nisi. Iste quo nulla, veniam quibusdam minus excepturi modi.</h6>
            </div>
          </div>
        </div>
      </div>
  </div>
  <div class="col-md-4">
      <div class="img-card">
        <img src="/static/rock6.jpg" alt="Текст" >
        <div class="content">
          <h2>С заботой</h2>
          <p>о ваших клиентах</p>
          <button id="myBtn6">About App</button>
          <div id="myModal6" class="modal">
            <div class="modal-content">
              <span class="close">&times; </span>
              <h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita amet ea fugiat consequatur hic dolore, illum, architecto officia nam perferendis recusandae nisi. Iste quo nulla, veniam quibusdam minus excepturi modi.</h6>

            </div>
          </div>
        </div>
      </div>
    </div>
  <!--  </div>-->
</div>

.modal{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0,0.8);
}
#myBtn{
  background: rgba(165, 165, 165, 0.6);
  border-radius: 5px;
  border: none;
}
#myBtn2{
  background: rgba(165, 165, 165, 0.6);
  border-radius: 5px;
  border: none;
}
#myBtn3{
  background: rgba(165, 165, 165, 0.6);
  border-radius: 5px;
  border: none;
}
#myBtn4{
  background: rgba(165, 165, 165, 0.6);
  border-radius: 5px;
  border: none;
}
#myBtn5{
  background: rgba(165, 165, 165, 0.6);
  border-radius: 5px;
  border: none;
}
#myBtn6{
  background: rgba(165, 165, 165, 0.6);
  border-radius: 5px;
  border: none;
}


.modal-content{
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;

}
.close{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close2{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close3{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close4{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close5{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close6{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
var modal3 = document.getElementById('myModal3');
var modal4 = document.getElementById('myModal4');
var modal5 = document.getElementById('myModal5');
var modal6 = document.getElementById('myModal6');

var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
var btn3 = document.getElementById("myBtn3");
var btn4 = document.getElementById("myBtn4");
var btn5 = document.getElementById("myBtn5");
var btn6 = document.getElementById("myBtn6");

var span = document.getElementsByClassName("close")[0];


btn.onclick = function(){
    modal.style.display = "block";
}
span.onclick = function(){
    modal.style.display = "none";
}
window.onclick = function (event) {
    if(event.target == modal){
        modal.style.display = "none";
    }
}

btn2.onclick = function(){
    modal2.style.display = "block";
}
span.onclick = function(){
    modal2.style.display = "none";
}
window.onclick = function (event) {
    if(event.target == modal){
        modal2.style.display = "none";
    }
}

btn3.onclick = function(){
    modal3.style.display = "block";
}
span.onclick = function(){
    modal3.style.display = "none";
}
window.onclick = function (event) {
    if(event.target == modal){
        modal3.style.display = "none";
    }
}

btn4.onclick = function(){
    modal4.style.display = "block";
}
span.onclick = function(){
    modal4.style.display = "none";
}
window.onclick = function (event) {
    if(event.target == modal){
        modal4.style.display = "none";
    }
}

btn5.onclick = function(){
    modal5.style.display = "block";
}
span.onclick = function(){
    modal5.style.display = "none";
}
window.onclick = function (event) {
    if(event.target == modal){
        modal5.style.display = "none";
    }
}

btn6.onclick = function(){
    modal6.style.display = "block";
}
span.onclick = function(){
    modal6.style.display = "none";
}
window.onclick = function (event) {
    if(event.target == modal){
        modal6.style.display = "none";
    }
}

Comments

[Ankhena]

1. Крестик закрытия - это кнопка, т.е. button, а не span.
2. Достаточно написать одну функцию, а не для каждой кнопки отдельно.
3. Манипулируйте классами, а не свойствами css.

let btnsCloseModal = document.querySelectorAll('.close');

btnsCloseModal.forEach((btn) => btn.addEventListener('click', function (e) {
  this.closest('.modal').classList.add('modal--hide');
}))

[Алексей]

Ankhena, То есть мне по сути заменить span на button, и вставить ваш код, а он заменяет все мои махинации в js?

[Ankhena]

Алексей, типа того, я не проверяла. CSS еще дописать.
Будут проблемы, делайте песочницу на jsfiddle.net

[Алексей]

Всё, проблему решил, спасибо!

[Ankhena]

Алексей, отлично :)