Klicken Sie auf das externe div um div in reinem JavaScript auszublenden

Question

Ich möchte ein Popup erstellen, das angezeigt werden soll, sobald eine Schaltfläche angeklickt wird und verschwindet, sobald der Benutzer außerhalb der Box klickt.

Ich bin nicht sicher, wie man das div verschwinden lässt, wenn ich außerhalb davon klicke.

var popbox = document.getElementById("popbox"); 

document.getElementById("linkbox").onclick = function() { 
    popbox.style.display = "block"; 
}; 

???.onclick = function() { 
    popbox.style.display = "none"; 
}; 

Answer 1

Hier ist die zweite Version, die ein transparentes Overlay hat, wie durch die Fragesteller in den Kommentaren gefragt ...

window.onload = function(){ 
 
\t var popup = document.getElementById('popup'); 
 
    var overlay = document.getElementById('backgroundOverlay'); 
 
    var openButton = document.getElementById('openOverlay'); 
 
    document.onclick = function(e){ 
 
     if(e.target.id == 'backgroundOverlay'){ 
 
      popup.style.display = 'none'; 
 
      overlay.style.display = 'none'; 
 
     } 
 
     if(e.target === openButton){ 
 
      \t popup.style.display = 'block'; 
 
      overlay.style.display = 'block'; 
 
     } 
 
    }; 
 
};

#backgroundOverlay{ 
 
    background-color:transparent; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    display:block; 
 
} 
 
#popup{ 
 
    background-color:#fff; 
 
    border:1px solid #000; 
 
    width:80vw; 
 
    height:80vh; 
 
    position:absolute; 
 
    margin-left:10vw; 
 
    margin-right:10vw; 
 
    margin-top:10vh; 
 
    margin-bottom:10vh; 
 
    z-index:500; 
 
}

<div id="popup">This is some text.<input type="button" id="theButton" value="This is a button"></div> 
 
    <div id="backgroundOverlay"></div> 
 
    <input type="button" id="openOverlay" value="open popup">

Hier ist die erste Version. ..

Hier ist etwas Code. Wenn Sie noch etwas hinzuzufügen haben, lassen Sie es mich wissen :)

Das Event (e) -Objekt gibt Zugriff auf Informationen über das Ereignis. e.target gibt Ihnen das Element, das das Ereignis ausgelöst hat.

window.onload = function(){ 
 
    var divToHide = document.getElementById('divToHide'); 
 
    document.onclick = function(e){ 
 
    if(e.target.id !== 'divToHide'){ 
 
     //element clicked wasn't the div; hide the div 
 
     divToHide.style.display = 'none'; 
 
    } 
 
    }; 
 
};

<div id="divToHide">Click outside of this div to hide it.</div>

Answer 2

Okay, hier ist eine Lösung auf Basis von jQuery basierend auf jeder div innerhalb des DOM geklickt.

$('div').on('click', function(e){ 
    var parents = $(e.currentTarget).parents(); 
    for (var i = 0; i < parents.length; i++) { 
     if (parents[i].id === 'divToHide' || e.currentTarget.id === 'divToHide') { 
      // you are in the popup 
     }; 
    } 
    e.stopPropagation(); 
}); 

Dies sieht Ihr aktuelles Element, sowie eines der Eltern, und überprüft, ob die ID übereinstimmt. Wenn divToHide in der eltern() Liste ist, dann bleibt das Popup geöffnet.

* Hinweis: Dies erfordert das Wrapping Ihrer Inhalte in einem Wrapper div oder etwas ähnliches.

Answer 3

el.onmouseleave = function(){ 
    document.body.onclick = function(){ 
    el.style.display = 'none'; 
    document.body.onclick = null; 
    } 
}