Как создать Js файл на несколько модальных окон?

Question

Как создать JS файл с addeventlistener для модального окна, совсем новичок в JS и не догоняю как это делается. Для одного создал Все модальные окна будут выглядеть идентично этому

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
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";
    }
 }

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

Answer 1

Наверное, вам нужно это:

var modal = document.getElementById('modal');
var open = document.getElementsByClassName("open")
var close = document.getElementsByClassName("close");

for (var i = 0; i < open.length; i++) {
  open[i].onclick = function() {
    var id = this.getAttribute('data-modal');
    var modal = document.getElementById(id);
    modal.style.display = 'block';
  }
}

for (var i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var id = this.getAttribute('data-modal');
    var modal = document.getElementById(id);
    modal.style.display = 'none';
  }
}

button.open {display: block; margin-top: 5px;}
span.close {font-size: 30px; cursor: pointer;}
.modal {display: none; border: 1px solid black;}

<div class="img-card">
  <img src="/static/rock1.jpg" alt="Текст 1">
  <div class="content">
    <h2>С заботой</h2>
    <p>о ваших клиентах</p>

    <button class="open" data-modal="modal1">Открыть окно 1</button>
    <div id="modal1" class="modal">
      <div class="modal-content">
        <span class="close" data-modal="modal1">&times;</span>
        <h3>Контент 1</h3>
      </div>
    </div>

    <button class="open" data-modal="modal2">Открыть окно 2</button>
    <div id="modal2" class="modal">
      <div class="modal-content">
        <span class="close" data-modal="modal2">&times;</span>
        <h3>Контент 2</h3>
      </div>
    </div>

    <button class="open" data-modal="modal3">Открыть окно 3</button>
    <div id="modal3" class="modal">
      <div class="modal-content">
        <span class="close" data-modal="modal3">&times;</span>
        <h3>Контент 3</h3>
      </div>
    </div>

    <button class="open" data-modal="modal4">Открыть окно 4</button>
    <div id="modal4" class="modal">
      <div class="modal-content">
        <span class="close" data-modal="modal4">&times;</span>
        <h3>Контент 4</h3>
      </div>
    </div>

    <button class="open" data-modal="modal5">Открыть окно 5</button>
    <div id="modal5" class="modal">
      <div class="modal-content">
        <span class="close" data-modal="modal5">&times;</span>
        <h3>Контент 5</h3>
      </div>
    </div>

    <button class="open" data-modal="modal6">Открыть окно 6</button>
    <div id="modal6" class="modal">
      <div class="modal-content">
        <span class="close" data-modal="modal6">&times;</span>
        <h3>Контент 6</h3>
      </div>
    </div>

  </div>
</div>

БЛОГ НА HUSL

Как создать Js файл на несколько модальных окон?

Ответы (1 шт):