बैकड्रॉप

Question

पर क्लिक करके एचटीएमएल संवाद तत्व को खारिज करें dialogs बनाने के लिए सामग्री डिज़ाइन लाइट लाइब्रेरी का उपयोग करना, जो अनिवार्य रूप से अंतर्निहित <dialog> तत्व का उपयोग करता है, क्या इसके पृष्ठभूमि पर क्लिक करके संवाद को खारिज करने का कोई तरीका है? (संवाद सामग्री को स्वयं क्लिक करते समय इसे को खारिज कर दिया जाना चाहिए)।

<dialog>Hi</dialog>  
<button>show</button> 

document.querySelector("button").addEventListener("click", 
() => document.querySelector("dialog").showModal()); 

https://jsfiddle.net/fyjbvbqq/

स्क्रीन पर कहीं भी क्लिक करने से जब संवाद तो यह लगता है कि यह निर्धारित करने में पृष्ठभूमि क्लिक किया गया था ... कोई आसान तरीका है की तरह dialog तत्व पर क्लिक करने के लिए मेल खाती है पर दिखाई जाती है वहाँ एक ऐसा करने का तरीका?

Answer 1

आप Element.getBoundingClientRect का उपयोग आकार और संवाद और परीक्षण की स्थिति प्राप्त करने के लिए हो सकता है यदि मौजूदा ग्राहक निर्देशांक इस क्षेत्र के अंदर कर रहे हैं:

document.querySelector("button").addEventListener("click",() => document.querySelector("dialog").showModal()); 
 
document.querySelector("dialog").addEventListener("click", (e) => { 
 
    var rect = e.target.getBoundingClientRect(); 
 
    var minX = rect.left + e.target.clientLeft; 
 
    var minY = rect.top + e.target.clientTop; 
 
    if ((e.clientX < minX || e.clientX >= minX + e.target.clientWidth) || 
 
     (e.clientY < minY || e.clientY >= minY + e.target.clientHeight)) { 
 
    e.target.close(); 
 
    } 
 
});

<dialog>Hi</dialog> 
 

 
<button> 
 
    show 
 
</button>