वेनिला JavaScript के साथ मॉडल विंडो, या किसी UI एलिमेंट को बंद करना सीखें जब यूजर उसके बाहर क्लिक करता है।
मॉडल पॉपअप आमतौर पर परेशान करने वाले होते हैं, खासकर जब वे आपकी पूरी स्क्रीन घेर लेते हैं। यह विशेष रूप से परेशान करने वाला होता है जब वे वेबसाइट में प्रवेश करने के कुछ सेकंड के भीतर होते हैं। यह बेवकूफी है, और यह खराब UX डिजाइन है।
कुछ वेबसाइट्स इसे अगले स्तर पर ले जाती हैं और क्लोज मॉडल (X) बटन को इतना छोटा और अजीब तरीके से पोजिशन करती हैं कि आपके पास पहेली को हल करते हुए वास्तव में नाराज होने के लिए बस पर्याप्त समय होता है कि आप भूल जाएं कि आप पहली बार उस वेबसाइट पर क्यों गए थे।
आइए इसे ठीक करें।
HTML: एक साधारण मॉडल विंडो
अपने HTML डॉक्यूमेंट में निम्नलिखित कोड जोड़ें:
<main>
<div class="modal">
<button class="button-close-modal">X</button>
<h2>Subscribe to my Newsletter</h2>
<p>Get access to exclusive content that only share with my email list</p>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" />
</div>
</main>CSS: साधारण मॉडल और बटन स्टाइलिंग
.modal {
padding: 2rem;
border: 1px solid #eee;
width: max-content;
position: fixed;
right: 0;
bottom: 0;
max-width: 100%;
}
.button-close-modal {
display: block;
font-size: 2rem;
font-weight: bold;
margin-left: auto;
}JavaScript: डॉक्यूमेंट पर सभी क्लिक्स का पता लगाएं
निम्नलिखित JavaScript कोड मॉडल विंडो को बंद कर देगा यदि यूजर या तो मॉडल एलिमेंट के बाहर क्लिक करता है, या X बटन पर क्लिक करता है:
document.addEventListener(
"click",
function(event) {
// यदि यूजर X बटन पर क्लिक करता है OR मॉडल विंडो के बाहर क्लिक करता है, तो मॉडल को closeModal() कॉल करके बंद करें
if (
event.target.matches(".button-close-modal") ||
!event.target.closest(".modal")
) {
closeModal()
}
},
false
)
function closeModal() {
document.querySelector(".modal").style.display = "none"
}यहां सभी कोड प्राप्त करें।
कोड में क्या होता है:
- सबसे पहले, हम
documentऑब्जेक्ट पर एक क्लिक इवेंट लिसनर सेट करते हैं। इसका मतलब है कि HTML डॉक्यूमेंट पर कहीं भी कोई भी क्लिक रजिस्टर होता है, और अब हम कर्ली ब्रेसेस{ .. }के अंदर हर क्लिक के लिए फंक्शन्स चला सकते हैं। - फिर हम मॉडल विंडो को बंद करने के दो तरीके/टार्गेट सेट करते हैं, या तो बटन क्लिक के साथ या मॉडल विंडो के बाहर क्लिक के साथ।
- if स्टेटमेंट के अंदर हम कहते हैं "यदि टार्गेट या तो बटन से मेल खाता है (
matches(".button-close-modal")) या (||) टार्गेट मॉडल विंडो पर नहीं हो रहा है!event.target.closest(".modal"), तोcloseModal()फंक्शन को कॉल करें। - जब
closeModal()फंक्शन को कॉल किया जाता है, तो यह.modalक्लास सेलेक्टर को चुनता है और इसेdisplay = 'none'के साथ छुपा देता है।
closest() मेथड किसी एलिमेंट के सबसे करीब के मैचिंग पैरेंट को ढूंढता है जिसमें एक सेलेक्टर होता है जिसे आप पास करते हैं, इस मामले में, हम एक क्लास सेलेक्टर (.modal) पास करते हैं।
matches() मेथड जांचता है कि इवेंट.टार्गेट एक विशिष्ट सेलेक्टर से मेल खाता है या नहीं, इस मामले में, यह क्लोज बटन क्लास सेलेक्टर .button-close-modal है।
