अपने बैकड्रॉप

Question

पर क्लिक करके नया एचटीएमएल

टैग को बंद करने के लिए कैसे करें मुझे अपनी पृष्ठभूमि (:: बैकड्रॉप) पर क्लिक करके एचटीएमएल 5 तत्व को बंद करने के लिए कोई भी समाधान या समाधान नहीं मिला है, हालांकि यह स्पष्ट रूप से मूलभूत है कार्यक्षमता।

Answer 1

बैकड्रॉप क्लिक डायलॉग बाउंडिंग रेक्ट का उपयोग करके पता लगाया जा सकता है।

var dialog = document.getElementByTagName('dialog'); 
dialog.showModal(); 
dialog.addEventListener('click', function (event) { 
    var rect = dialog.getBoundingClientRect(); 
    var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height 
     && rect.left <= event.clientX && event.clientX <= rect.left + rect.width); 
    if (!isInDialog) { 
     dialog.close(); 
    } 
}); 

Answer 2

एक और अधिक कुशल समाधान padding: 0 के साथ एक div में dialog -content रैप करने के लिए है। इस तरह आप क्लिक-इवेंट के event.target की जांच कर सकते हैं, जो वास्तविक मोडल के मामले में div के भीतर बैकड्रॉप और किसी भी अन्य तत्व के मामले में संवाद का संदर्भ देता है।

वास्तविक आयामों की जांच न करके, हम लेआउट चक्र को रोक सकते हैं।

const popup = document.getElementById('popup'); 
 
const popupDialog = document.getElementById('popup-dialog'); 
 
popup.addEventListener('click', function(e){ 
 
    console.info(e.target.tagName); 
 
    if (e.target.tagName === 'DIALOG') popupDialog.close() 
 
});

<div id="popup" style="padding: 0"> 
 
    <dialog id="popup-dialog" style="display:none;"> 
 
     <h4>Dialog Title</h4> 
 
     <footer class="modal-footer"> 
 
      <button id="popup-close" type="button">close</button> 
 
      <button id="popup-ok" type="button">ok</button> 
 
     </footer> 
 
    </dialog> 
 
</div>

:

Answer 3

किसी को भी इस सवाल पर ठोकर और समाधान @meaku द्वारा सिफारिश का पालन करना चाहता है के लिए, यहाँ मैं इसे और तत्व को संपुटित करने के लिए एक का उपयोग नहीं करने के लिए getBoundingClientRect के साथ काम() गणना कैसे हल है