模态“关闭”不起作用

Question

I've taken a working script and adjusted it to allow for multiple independent modals and I am no longer able to close any of the modals. I receive the error:

Cannot set property 'display' of undefined at HTMLSpanElement.span.onclick

Neither the window.onclick or document.onclick functions are working. Here's the jsfiddle

<div class="contentSection">
    <a class="popupBtn" data-modal="modal-window-one">Open Me!</a>
</div>

<div id="modal-window-one" class="popupModal modal">
    <span class="close">&times;</span>
    <div class="modalContent">
        <p>Here's some content!</p>
    </div>
</div>

<div class="contentSection">
    <a class="popupBtn" data-modal="modal-window-two">...Or Open Me!</a>
</div>

<div id="modal-window-two" class="popupModal modal">
    <span class="close">&times;</span>
    <div class="modalContent">
        <p>Here's some different content!</p>
    </div>
</div>


var modal = document.getElementsByClassName('popupModal');
var btn = document.getElementsByClassName("popupBtn");
var span = document.getElementsByClassName("close")[0];

for (var i = 0; i < btn.length; i++) {
    var thisBtn = btn[i];
    thisBtn.addEventListener("click", function(){
        var modal = document.getElementById(this.dataset.modal);
        modal.style.display = "block";
    }, false);
}

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

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

Answer 1

modal is an HTMLCollection (array like object), as you have class popupModal for more than one element. So you need to iterate through the array and set display = none for all.

Also, you have assigned click for the first close element only, so you need to iterate through the span elements and attach click for both span elements to close both modal windows.

Or, you can just iterate through the modal array and attach event listener to close the modal if event.target is span .

 var modal = document.getElementsByClassName('popupModal'); var btn = document.getElementsByClassName("popupBtn"); var span = document.getElementsByClassName("close"); for (var i = 0; i < btn.length; i++) { var thisBtn = btn[i]; thisBtn.addEventListener("click", function() { var modal = document.getElementById(this.dataset.modal); modal.style.display = "block"; }, false); } for (var i = 0; i < modal.length; i++) { modal[i].addEventListener("click", function(e) { if(e.target.className === 'close') { this.style.display = 'none'; } }, false); } 

 .popupBtn { cursor: pointer; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); cursor: pointer; } .modalContent { background-color: #fefefe; margin: 15% auto; padding: 20px; border-top: 8px solid #81c8e8; border-radius: 4px; width: 50%; box-shadow: 0px 2px 8px #222; cursor: default; font-size: .9em; } .close { color: #ccc; float: right; font-size: 25pt; font-weight: bold; transition: ease-in-out .5s; padding: 10px 30px; background-color: #2b3d52; } .close:hover, .close:focus { color: #fff; text-decoration: none; cursor: pointer; } 

 <div class="contentSection"> <a class="popupBtn" data-modal="modal-window-one">Open Me!</a> </div> <div id="modal-window-one" class="popupModal modal"> <span class="close">&times;</span> <div class="modalContent"> <p> Here's some content! </p> </div> </div> <div class="contentSection"> <a class="popupBtn" data-modal="modal-window-two">...Or Open Me!</a> </div> <div id="modal-window-two" class="popupModal modal"> <span class="close">&times;</span> <div class="modalContent"> <p> Here's some different content! </p> </div> </div> 

Answer 2

I saw a couple of things that were not right in your code:

1) you were using twice var modal

2) you subscribe to onclick of only one <span></span>

3) var model = document.getElementsByClassName('popupModal'); will actually return a HTMLCollection and this code:

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

will never work( you need to think to refactor it )

So you need to capture the click of both spans and it should work

 var modals = document.getElementsByClassName('popupModal'); var btns = document.getElementsByClassName("popupBtn"); var spans = document.getElementsByClassName("close"); for (var i = 0; i < btns.length; i++) { var thisBtn = btns[i]; thisBtn.addEventListener("click", function() { var m = document.getElementById(this.dataset.modal); m.style.display = "block"; }, false); } for (var i = 0; i < spans.length; i++) { var thisSpan = spans[i]; thisSpan.addEventListener("click", function() { this.parentNode.style.display = "none"; }, false); } 

 .popupBtn { cursor: pointer; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); cursor: pointer; } .modalContent { background-color: #fefefe; margin: 15% auto; padding: 20px; border-top: 8px solid #81c8e8; border-radius: 4px; width: 50%; box-shadow: 0px 2px 8px #222; cursor: default; font-size: .9em; } .close { color: #ccc; float: right; font-size: 25pt; font-weight: bold; transition: ease-in-out .5s; padding: 10px 30px; background-color: #2b3d52; } .close:hover, .close:focus { color: #fff; text-decoration: none; cursor: pointer; } 

 <div class="contentSection"> <a class="popupBtn" data-modal="modal-window-one">Open Me!</a> </div> <div id="modal-window-one" class="popupModal modal"> <span class="close">&times;</span> <div class="modalContent"> <p> Here's some content! </p> </div> </div> <div class="contentSection"> <a class="popupBtn" data-modal="modal-window-two">...Or Open Me!</a> </div> <div id="modal-window-two" class="popupModal modal"> <span class="close">&times;</span> <div class="modalContent"> <p> Here's some different content! </p> </div> </div>