Проблемы с закрытием модальных форм с помощью Javascript - PullRequest
Новая
       7

Проблемы с закрытием модальных форм с помощью Javascript

0 голосов
/ 11 октября 2018

У меня есть некоторые проблемы с закрытием моих модальных всплывающих форм, одна из них закрывается, а другая - нет.Я не совсем уверен, в чем проблема, хотя это должно быть тривиально.Я только начал серьезно изучать JS, поэтому буду признателен за помощь.Я должен добавить, что оба из модалов открываются просто отлично. 

    // Get the modal
    var modal = document.getElementById('modal');

    // Get the button that opens the modal
    var btn = document.getElementById("regbtn");

    // Get the modal
    var signinmodal = document.getElementById('signinmodal');

    // Get the button that opens the modal
    var signinbtn = document.getElementById("signinbtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on the button, open the modal
    signinbtn.onclick = function() {
        signinmodal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        signinmodal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target === signinmodal) {
            signinmodal.style.display = "none";
        }
    }

1 Ответ

0 голосов
/ 11 октября 2018

Когда вы присваиваете window.onclick = ... дважды, вы переопределяете последнее присваивание ему, как если бы вы присваивали значение переменной: 

val = 5;
val = 7; // 5 is now gone

Вы должны объединить их в один и тот же вызов функции, чтобычто события будут сохраняться 

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

То же самое относится к тегу span 

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