Wie bekomme ich diesen Code zu arbeiten, ohne jede Variable manuell zu schreiben?

Question

Mein Problem ist jetzt, dass ich jede Variable und jede if-Klausel manuell schreiben muss, um jeden Knopf zum Funktionieren zu bringen, der offensichtlich viel zu viel Arbeit ist und es sehr begrenzt ist.

Der Beispielcode I Arbeiten wie vorgesehen, aber zu lang sehr schnell bekommen ...

<script> 
    window.onclick = function(event) { 
     var modalEdit1 = document.getElementById('MODAL_EDIT1'); 
     var modalEdit2 = document.getElementById('MODAL_EDIT2'); 
     var modalEdit3 = document.getElementById('MODAL_EDIT3'); 
     var modal = document.getElementById('MODAL_ADD'); 
     if (event.target == modal) { 
      modal.style.display = "none"; 
     } 
     if (event.target == modalEdit1) { 
      modalEdit1.style.display = "none"; 
     } 
     if (event.target == modalEdit2) { 
      modalEdit2.style.display = "none"; 
     } 
     if (event.target == modalEdit3) { 
      modalEdit3.style.display = "none"; 
     } 
    } 

    function closeModal(target) { 
     var view = document.getElementById(target); 
     view.style.display = "none"; 
    } 

    function showModal(target) { 
     var view = document.getElementById(target); 
     view.style.display = "block"; 
    } 

EDIT: Gibt es nicht eine Möglichkeit, es in Schritten zu tun?

Answer 1

Geben gemeinsame Klasse für alle Modalverben, dann, wenn das Ziel dieser Klasse hat alle Zieleltern mit dieser Klasse hat, Ziel/Ziel-Mutter

Answer 2

verstecken Wenn das event.target das Element Sie brauchen:

window.onclick = function(event) 
{  
    var modal = document.getElementById('MODAL_ADD'); 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
    event.target.style.display = "none"; 
} 

function closeModal(target) { 
    var view = document.getElementById(target); 
    view.style.display = "none"; 
} 

function showModal(target) { 
    var view = document.getElementById(target); 
    view.style.display = "block"; 
} 

Answer 3

Sie können eine Klasse hinzufügen, um dieses Verhalten anzugeben.

Hier ist ein Beispiel mit "verdeckte" Klasse.

window.onclick = function(event) { 
    if (event.targed.className == 'hideable') { 
    event.target.style.display = 'none' 
    } 
}