Как исправить функцию закрытия, чтобы она работала индивидуально на нескольких модах, накладываемых друг на друга? - PullRequest
Новая
       30

Как исправить функцию закрытия, чтобы она работала индивидуально на нескольких модах, накладываемых друг на друга?

0 голосов
/ 28 апреля 2020

Я пытаюсь создать два мода в стеке. Я хочу, чтобы они оба показали onload, и тогда вы сможете закрыть первый, чтобы прочитать то, что написано на втором. Я нашел здесь код в стеке, который предлагает javascript, который работает для нескольких модальных режимов. Оно делает! Хотя я не могу заставить работать кнопку закрытия индивидуально для каждого модального режима. Вместо этого кнопка закрытия закрывает весь стек. Может кто-нибудь помочь мне понять, как изменить только эту часть?

Вот мой код: 

HTML

<div class="header">
            <button class="modal_button" href="#myModal1" id="item1">Intro</button>
            <button class="modal_button" href="#myModal2" id="item2">About</button>
</div>

        <div id="myModal1" class="modal">
            <div class="modal-content" id="explanation">
            <span class="close" href="#myModal1">x</span>
            <h5>Description</h5>
            </div>
        </div>

        <div id="myModal2" class="modal">
            <div class="modal_content" id="about">
            <span class="close" href="#myModal2">x</span>
            <h5>About-text</h5>
            </div>
        </div>

JAVASCRIPT: 



var btn = document.querySelectorAll("button.modal_button");

var modals = document.querySelectorAll('.modal');
var spans = document.querySelectorAll("close");

for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
    }
 }
}

window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
     }
    }
}
...