Javascript Event-Handler mehrere Ziele

Question

Ich habe Javascript Event-Handler für mehrere Modale auf einer Seite. Das Ziel ist es, die Box zu schließen, wenn der Benutzer auf Modal außen klickt.

Es gibt eine Möglichkeit von bis zu 4 Modals auf einer Seite, einige haben 2 und einige haben 3. Wenn ich eine Seite mit allen 4 Modals habe, funktioniert diese Funktion perfekt. Das Problem tritt auf, wenn ich nur 2 oder 3 habe. Die Funktion funktioniert möglicherweise für die erste Box, aber nicht für die dritte Box.

Ich brauche das zu feuern, egal welche Modale auf der Seite sind.

document.onclick = function(event) { 
if (event.target == modal || event.target == modal2 || event.target == modal3 || event.target == modal4) { 
event.target.style.display = "none"; 
} 
} 

https://jsfiddle.net/fastgrowingtrees/w3bo9q29/

Answer 1

so etwas wie dies versuchen. Jedes Mal, wenn Sie ein Modal erstellen oder entfernen, entfernen Sie seine ID aus dem Modal-Array. Da alle Modalitäten gleich behandelt werden, können Sie sie einfach durchlaufen, ohne dass Sie den Init-Code kopieren müssen.

Der Schlüssel hier ist die Arbeit mit den IDs, nicht mit den tatsächlichen Elementen, da in Ihrem ursprünglichen Code, wenn Sie ein Modal hinzufügen oder entfernen, müssen Sie auch die Funktion document.onclick bearbeiten.

var modals = ["myModal_1", "myModal_2", "myModal_3", "myModal_4"]; 
    modals.forEach(function(id, index) { 
     var modal = document.getElementById(id), 
      btn = document.getElementById('m' + id.slice(3)), 
      span = document.getElementsByClassName("close")[index]; 
     btn.onclick = function() { 
      modal.style.display = "block"; 
     } 
     span.onclick = function() { 
      modal.style.display = "none"; 
     } 
    }); 
    document.onclick = function(event) { 
     if (modals.indexOf(event.target.id) !== -1) { 
      event.target.style.display = "none"; 
     } 
    } 

Answer 2

Schritte:

gesetzt

<div id="modal">Modal</div> 
... 
<div id="modal4">Modal 4</div> 

Check IF-Anweisung wie folgt:

document.onclick = function(event) { 
var x=event.target.getAttribute("id"); 
if (x == 'modal' || x == 'modal2' || x == 'modal3' || x == 'modal4') { 
event.target.style.display = "none"; 
} 
}