Невозможно открыть модал CSS, содержащий кнопку в цикле - PullRequest
Новая
       10

Невозможно открыть модал CSS, содержащий кнопку в цикле

0 голосов
/ 10 мая 2018

Я создал простой модал в CSS, используя код из JavaScript и HTML.Триггерная кнопка находится в цикле, который повторяется много раз.Первое появление сработавшей кнопки работает нормально, и появляется модальный режим, но он не отображается для остальной части содержимого.

Вот код, который я пробовал: 

while($query->have_posts()) : $query->the_post(){
  <!-- some html here-->
   <div class=" pull-left hs-book-now-button">
        <button id="myBtn">Book Now</button>     
    </div>
}

Модальный html: 

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>'modal content here'</p>
  </div>

</div>

И код JavaScript: 

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";
    }
}
...