जब उपयोगकर्ता वैनिला जावास्क्रिप्ट के साथ इसके बाहर क्लिक करते हैं तो एक मॉडल विंडो को कैसे बंद करें?

जब उपयोगकर्ता इसके बाहर क्लिक करता है, तो वैनिला जावास्क्रिप्ट के साथ, एक मोडल विंडो या किसी 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:दस्तावेज़ पर सभी क्लिक का पता लगाएं

यदि उपयोगकर्ता या तो मोडल तत्व के बाहर क्लिक करता है, या यदि वे X बटन पर क्लिक करते हैं, तो निम्न JavaScript कोड मोडल विंडो को बंद कर देगा:

document.addEventListener(
  "click",
  function(event) {
    // If user either clicks X button OR clicks outside the modal window, then close modal by calling 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() विधि जांचता है कि क्या event.target किसी विशिष्ट चयनकर्ता से मेल खाता है, इस मामले में, यह क्लोज बटन क्लास चयनकर्ता है .button-close-modal ।