शुद्ध जावास्क्रिप्ट में div को छिपाने के लिए बाहरी div पर क्लिक करें

Question

मैं एक पॉपअप बनाना चाहता हूं जो एक बार क्लिक होने पर दिखाई दे और एक बार बॉक्स के बाहर क्लिक करने के बाद गायब हो जाए।

मुझे यकीन नहीं है कि जब मैं इसके बाहर क्लिक करता हूं तो div गायब हो जाता है।

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

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

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

Answer 1

यहाँ जो एक पारदर्शी ओवरले के रूप में टिप्पणी में प्रश्नकर्ता ने पूछा है दूसरा संस्करण है ...

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

यहाँ पहले संस्करण है। ..

यहां है कुछ कोड अगर जोड़ने के लिए कुछ और है, तो कृपया मुझे बताएं :)

ईवेंट (ई) ऑब्जेक्ट घटना के बारे में जानकारी तक पहुंच प्रदान करता है। e.target आपको वह तत्व देता है जो घटना को ट्रिगर करता है।

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

ठीक है, एक jQuery आधारित आधारित पर किसी भी div डोम के भीतर क्लिक किया समाधान है।

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

यह आपके वर्तमान तत्व, साथ ही साथ किसी भी माता-पिता को देखता है, और आईडी से मेल खाता है या नहीं। यदि divToHide माता-पिता() सूची में है, तो आप पॉपअप को खोलते रहते हैं।

* नोट: इसके लिए आपकी सामग्री को रैपर div या कुछ समान के भीतर लपेटने की आवश्यकता है।

Answer 3

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