Fare clic su div esterno per nascondere div in puro JavaScript

Question

Voglio fare un popup che dovrebbe apparire quando si fa clic su un pulsante e scompare quando l'utente fa clic all'esterno della casella.

Non sono sicuro di come far sparire il div quando clicco al di fuori di esso.

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

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

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

Answer 1

Ecco la seconda versione, che ha una mascherina trasparente come richiesto dal richiedente nei commenti ...

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">

Ecco la prima versione. ..

Qui è un po 'di codice Se c'è qualcos'altro da aggiungere, per favore fatemelo sapere :)

L'oggetto evento (e) dà accesso alle informazioni sull'evento. e.target ti dà l'elemento che ha attivato l'evento.

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

Ok, ecco una soluzione basata jQuery in base a qualsiasi div cliccato all'interno del DOM.

$('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(); 
}); 

Questo guarda il tuo elemento attuale, così come uno qualsiasi dei genitori, e controlla se l'id corrisponde. Se divToHide si trova nell'elenco dei genitori(), mantieni il popup aperto.

* NOTA: Ciò richiede il wrapping del contenuto all'interno di un div wrapper o qualcosa di simile.

Answer 3

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