Несколько модалов не работают должным образом

Приносим извинения, если об этом ответили раньше, но я часами смотрю на этот код и не могу понять, почему он ведет себя так, как он есть.Несколько модалов не работают должным образом

У меня есть страница с 3-мя модальными окнами, которые я использую для запуска javascript. Теперь только с одним модальным окном он отлично работает, однако я попытался добавить еще два окна, и первая ссылка для первого окна запускает третий модальный, а затем функция закрытия больше не работает.

Вот мой код:

CSS:

<style> 
/* The Modal (background) */ 
.modal { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
left: 0; 
top: 0; 
width: 100%; /* Full width */ 
height: 100%; /* Full height */ 
overflow: auto; /* Enable scroll if needed */ 
background-color: rgb(0,0,0); /* Fallback color */ 
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

.modal1 { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
left: 0; 
top: 0; 
width: 100%; /* Full width */ 
height: 100%; /* Full height */ 
overflow: auto; /* Enable scroll if needed */ 
background-color: rgb(0,0,0); /* Fallback color */ 
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

.modal2 { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
left: 0; 
top: 0; 
width: 100%; /* Full width */ 
height: 100%; /* Full height */ 
overflow: auto; /* Enable scroll if needed */ 
background-color: rgb(0,0,0); /* Fallback color */ 
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content/Box */ 
.modal-content { 
background-color: #fefefe; 
margin: 15% auto; /* 15% from the top and centered */ 
padding: 20px; 
border: 1px solid #888; 
width: 80%; /* Could be more or less, depending on screen size */ 
} 

/* The Close Button */ 
.close { 
color: #aaa; 
float: right; 
font-size: 28px; 
font-weight: bold; 
} 

.close:hover, 
.close:focus { 
color: black; 
text-decoration: none; 
cursor: pointer; 
} 

/* Modal Header */ 
.modal-header { 
padding: 2px 16px; 
background-color: #5cb85c; 
color: white; 
} 

/* Modal Body */ 
.modal-body {padding: 2px 16px;} 

/* Modal Footer */ 
.modal-footer { 
padding: 2px 16px; 
background-color: #5cb85c; 
color: white; 
} 

/* Modal Content */ 
.modal-content { 
position: relative; 
background-color: #fefefe; 
margin: auto; 
padding: 0; 
border: 1px solid #888; 
width: 80%; 
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
-webkit-animation-name: animatetop; 
-webkit-animation-duration: 0.4s; 
animation-name: animatetop; 
animation-duration: 0.4s 
} 

/* Add Animation */ 
@-webkit-keyframes animatetop { 
from {top: -300px; opacity: 0} 
to {top: 0; opacity: 1} 
} 

@keyframes animatetop { 
from {top: -300px; opacity: 0} 
to {top: 0; opacity: 1} 
} 
</style>

HTML & Javascript:

<!-- Trigger/Open The Modal --> 
<a href="#" id="myBtn">Open Modal 1</a> 
<a href="#" id="myBtn1">Open Modal 2</a> 
<a href="#" id="myBtn2">Open Modal 3</a> 

<!-- modal 1 --> 
<script type="text/javascript"> 
      function modalFun(){ 
       // Get the modal 
       var modal = document.getElementById('myModal'); 

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


       // 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() { 
        console.log(modal); 
        modal.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"; 
        } 
       } 

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

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


       // 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() { 
        console.log(modal1); 
        modal1.style.display = "block"; 
       } 

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

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

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

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


       // 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() { 
        console.log(modal2); 
        modal2.style.display = "block"; 
       } 

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

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

      window.onload=modalFun; 
     </script> 

<!-- Modal 1 --> 
<div id="myModal" class="modal"> 

<!-- Modal content --> 
<div class="modal-content"> 
<div class="modal-header"> 
<span class="close">×</span> 
<h2>Modal Header</h2> 
</div> 
<div class="modal-body"> 
<p>Some text in the Modal Body</p> 
<p>Some other text...</p> 
</div> 
<div class="modal-footer"> 
<h3>Modal Footer</h3> 
</div> 
</div> 

</div> 

<!-- Modal 1 --> 

<!-- Modal 2 --> 

<!-- The Modal --> 
<div id="myModal1" class="modal1"> 

<!-- Modal content --> 
<div class="modal-content"> 
<div class="modal-header"> 
<span class="close">×</span> 
<h2>Modal Header2</h2> 
</div> 
<div class="modal-body"> 
<p>Some text in the Modal Body</p> 
<p>Some other text...</p> 
</div> 
<div class="modal-footer"> 
<h3>Modal Footer</h3> 
</div> 
</div> 

</div> 

<!-- Modal 2 --> 

<!-- Modal 3 --> 

<!-- The Modal --> 
<div id="myModal2" class="modal2"> 

<!-- Modal content --> 
<div class="modal-content"> 
<div class="modal-header"> 
<span class="close">×</span> 
<h2>Modal Header3</h2> 
</div> 
<div class="modal-body"> 
<p>Some text in the Modal Body</p> 
<p>Some other text...</p> 
</div> 
<div class="modal-footer"> 
<h3>Modal Footer</h3> 
</div> 
</div> 

</div> 

<!-- Modal 3 -->

источник

2016-10-10 holodout

var span = document.getElementsByClassName("close")[0]; возвращает первый .close в документе каждый раз. Вам нужно захватить .close, который соответствует вашим индивидуальным модалам. querySelector - отличный инструмент для этого. Попробуйте

var span = modal.querySelector('.close');

, чтобы получить правильный ответ. Вы также используете .onclick для настройки обработчиков событий. Это лучше использовать addEventListener:

span.addEventListener('click', function() { 
    modal.style.display = 'none'; 
});

Кроме того, вы дублируя много кода и изменить то, что modal относится. Было бы лучше перенести эту функциональность в функцию.

function initializeModal(modalID, buttonID) { 
    // Get the modal element 
    var modal = document.getElementById(modalID); 

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

    // Get the <span> element that closes the modal 
    var span = modal.querySelector('.close'); 

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

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

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

Собираем все вместе:

function initializeModal(modalID, buttonID) { 
 
    // Get the modal element 
 
    var modal = document.getElementById(modalID); 
 

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

 
    // Get the <span> element that closes the modal 
 
    var span = modal.querySelector('.close'); 
 

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

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

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

 
window.addEventListener('load', function() { 
 
    initializeModal('myModal', 'myBtn'); 
 
    initializeModal('myModal1', 'myBtn1'); 
 
    initializeModal('myModal2', 'myBtn2'); 
 
});

/* Reuse this class for each modal */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 100%; 
 
    /* Full height */ 
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
} 
 
/* Modal Content/Box */ 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 15% auto; 
 
    /* 15% from the top and centered */ 
 
    padding: 20px; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
    /* Could be more or less, depending on screen size */ 
 
} 
 
/* The Close Button */ 
 

 
.close { 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 
.close:hover, 
 
.close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 
/* Modal Header */ 
 

 
.modal-header { 
 
    padding: 2px 16px; 
 
    background-color: #5cb85c; 
 
    color: white; 
 
} 
 
/* Modal Body */ 
 

 
.modal-body { 
 
    padding: 2px 16px; 
 
} 
 
/* Modal Footer */ 
 

 
.modal-footer { 
 
    padding: 2px 16px; 
 
    background-color: #5cb85c; 
 
    color: white; 
 
} 
 
/* Modal Content */ 
 

 
.modal-content { 
 
    position: relative; 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 0; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    -webkit-animation-name: animatetop; 
 
    -webkit-animation-duration: 0.4s; 
 
    animation-name: animatetop; 
 
    animation-duration: 0.4s 
 
} 
 
/* Add Animation */ 
 

 
@-webkit-keyframes animatetop { 
 
    from { 
 
    top: -300px; 
 
    opacity: 0 
 
    } 
 
    to { 
 
    top: 0; 
 
    opacity: 1 
 
    } 
 
} 
 
@keyframes animatetop { 
 
    from { 
 
    top: -300px; 
 
    opacity: 0 
 
    } 
 
    to { 
 
    top: 0; 
 
    opacity: 1 
 
    } 
 
}

<!-- Trigger/Open The Modal --> 
 
<a href="#" id="myBtn">Open Modal 1</a> 
 
<a href="#" id="myBtn1">Open Modal 2</a> 
 
<a href="#" id="myBtn2">Open Modal 3</a> 
 

 
<!-- Modal 1 --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">×</span> 
 
     <h2>Modal Header</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p>Some text in the Modal Body</p> 
 
     <p>Some other text...</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <h3>Modal Footer</h3> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<!-- Modal 2 --> 
 
<div id="myModal1" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">×</span> 
 
     <h2>Modal Header2</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p>Some text in the Modal Body</p> 
 
     <p>Some other text...</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <h3>Modal Footer</h3> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<!-- Modal 3 --> 
 
<div id="myModal2" class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">×</span> 
 
     <h2>Modal Header3</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p>Some text in the Modal Body</p> 
 
     <p>Some other text...</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <h3>Modal Footer</h3> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-10-10 17:14:23

Это идеальный вариант , Я не знаю, почему я не думал использовать addEventListener и querySelector. Это также объясняет, почему функция закрытия не работала над третьим модальным (потому что она пыталась закрыть первый). Спасибо! @ mike-c – holodout

@holodout Вы получили это! Рад, что смог помочь :) –

Вы код не совсем правильно вы повторного объявления переменных с в той же функции , Из-за этого БТН является переплетены до последнего модальных в конце функции использования различных переменных, таких как БТН, btn1, btn2

Также var span = document.getElementsByClassName("close")[0]; Это будет всегда переплетены с первым вам придется использовать различные ID для кнопки закрытия тоже ..

Я предлагаю вам использовать самозагрузки покадрово ваш код станет намного чище Это не хороший подход

Вот рабочая скрипку https://jsfiddle.net/c9ftdgum/

источник

2016-10-10 17:08:21

@ микрофон-с ответил на это в лучшем случае вы можете увидеть его ответ будет также очистить код –

Несколько модалов не работают должным образом

ответ

Смежные вопросы