Modal 'close' funktioniert nicht

Question

Ich habe ein funktionierendes Skript genommen und es angepasst, um mehrere unabhängige Modale zu ermöglichen und ich bin nicht mehr in der Lage, irgendwelche Modale zu schließen. Ich erhalte den Fehler:

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

Weder die Funktionen window.onclick oder document.onclick funktionieren. 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 ist ein HTMLCollection (Array wie Objekt), wie Sie Klasse haben popupModal für mehr als ein Element. Sie müssen also das Array iterieren und display = none für alle festlegen.

Außerdem haben Sie click zum ersten close Elemente nur zugewiesen, so dass Sie durch die span Elemente zu durchlaufen müssen und befestigen click für beiden Spannelemente beider modalen Fenster zu schließen.

Oder Sie können einfach durch das modal Array durchlaufen und anhängen Ereignis-Listener, um das modale zu schließen, wenn event.targetspan ist.

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

sah ich ein paar Dinge, die nicht direkt im Code waren:

1) Sie zweimal var modal wurden unter Verwendung

2) Sie abonnieren Sie onclick von nur ein <span></span>

3) var model = document.getElementsByClassName('popupModal'); wird tatsächlich ly zurückgeben HTMLCollection und diesen Code:

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

wird nie funktionieren (Sie es Refactoring denken müssen, um zu)

So müssen Sie die click beiden Spannweiten erfassen und es sollte funktionieren

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() { 
 
    \t 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>