मैं कुछ तकनीकी समाचार ब्लॉग पढ़ रहा था और बेसलाइन में शीर्ष पॉपओवर एपीआई भूमि पर मेरी नजर पड़ी। मैं उलझन में था, हाल ही में फ्रंट-एंड विकास में गोता लगाने के दौरान, मुझे हाल ही में HTML में तत्वों का उपयोग करने का आदी होने में बहुत कठिनाई हो रही थी। ब्लॉग पर जाते समय मैं लगातार उलझन में था कि मैं अब तक इस तत्व का उपयोग कैसे कर रहा था।

टीएल;डीआर

इसके लिए चुनें:

• उपयोगकर्ता फोकस की आवश्यकता वाले मॉडल पॉपअप
• पहुंच-योग्यता और कीबोर्ड इंटरैक्शन

इसके लिए पॉपओवर चुनें:

• हल्के-बर्खास्तगी के साथ गैर-मोडल पॉपअप
• न्यूनतम कोड के साथ आसान कार्यान्वयन

तत्व

एमडीएन के अनुसार संवाद तत्व

एचटीएमएल तत्व एक मोडल या गैर-मोडल डायलॉग बॉक्स या अन्य इंटरैक्टिव घटक का प्रतिनिधित्व करता है, जैसे खारिज करने योग्य अलर्ट, इंस्पेक्टर, या सबविंडो।

ए का उपयोग आम तौर पर तब किया जाता है और सामग्री पर प्रदर्शित किया जाता है जब वेबसाइट को उपयोगकर्ता का ध्यान किसी महत्वपूर्ण चीज़ की ओर आकर्षित करने की आवश्यकता होती है। यानी किसी न्यूज़लेटर की सदस्यता लेना, एडब्लॉकर को अक्षम करने के लिए अनुरोध करना (मजबूर करने जैसा), या नियम और शर्तों को स्वीकार करना।

तत्व मॉडल के रूप में

जैसा कि आपने कई बार कई वेबसाइटों पर देखा होगा, इनमें से कुछ पॉपअप पृष्ठभूमि को धुंधला करते हुए या पृष्ठभूमि को अक्षम करते हुए आपकी पूरी स्क्रीन पर खींचे जाएंगे और उपयोगकर्ता को केवल हाथ में काम पर ध्यान केंद्रित करेंगे, उपयोगकर्ता को या तो खारिज करना होगा (केवल अनुमति होने पर) पॉपअप करें या इसे दूर करने के लिए आवश्यक जानकारी दर्ज करें। इस व्यवहार को 'मोडल के रूप में तत्व' कहा जाता है। ये मॉडल तत्व पृष्ठ की शीर्ष परत पर दिखाए गए हैं।

//To open dialog as a modal.

dialog.showModal();

// To close the dialog.

dialog.close();

तत्व को जब showModal() विधि का उपयोग करके दिखाया जाता है तो उसे esc कुंजी का उपयोग करके ख़ारिज किया जा सकता है। कीबोर्ड उपयोगकर्ता ऐसे व्यवहार की अपेक्षा करते हैं जिसे बनाए रखने की आवश्यकता होती है और जो ब्राउज़र द्वारा प्रदान किया जाता है। यदि एकाधिक मोडल संवाद खुले हैं, तो केवल अंतिम संवाद esc कुंजी का उपयोग करके बंद किया जाएगा।

तत्व गैर-मोडल के रूप में

हो सकता है कि आप हमेशा अपने वेबपेज का उपयोग करने के उपयोगकर्ता के स्वाभाविक प्रवाह को रोकना न चाहें, बाकी सब कुछ करना बंद न करें और जो आप दिखाना चाहते हैं उस पर ध्यान केंद्रित करें लेकिन फिर भी अपनी सामग्री, जैसे टोस्ट अधिसूचना, कुकी सहमति, या सामान्य टूलटिप जानकारी पृष्ठ की शीर्ष परत पर, किसी भी अन्य सामग्री के ऊपर दिखाई देनी चाहिए जिसके साथ उपयोगकर्ता इंटरैक्ट कर सकता है या नहीं कर सकता है। इस प्रकार के पॉप-अप को नॉन-मोडल पॉप-अप कहा जाता है। उपयोगकर्ता इन्हें मैन्युअल रूप से या आम तौर पर समय-समय पर खारिज कर सकते हैं और अपने आप गायब हो जाएंगे। ये गैर-मोडल संवाद अभी भी पृष्ठ की शीर्ष परत पर दिखाए जाते हैं लेकिन उनकी प्राथमिकता को z-इंडेक्स का उपयोग करके नियंत्रित किया जा सकता है और मोडल तत्व इससे अधिक z-इंडेक्स लेगा और इसे गैर-पहुंच योग्य बना देगा।

//To open dialog as a modal.

dialog.show();

// To close the dialog.

dialog.close();

कोड उदाहरण

कुछ मुद्दे

मुझे गैर-मोडल तत्वों की कार्यप्रणाली और उपयोग को समझने में कठिनाई हुई। मेरे अनुसार गैर-मोडल तत्व असंगत व्यवहार करता है और ऐसी स्थितियों को संभालने के लिए जावास्क्रिप्ट कोड की आवश्यकता होती है:

• कोई हल्की बर्खास्तगी कार्यक्षमता नहीं है। मॉडल के बाहर क्लिक करने से .
बंद नहीं होगा
• esc कुंजी खारिज नहीं करती है और उस परिदृश्य को संभालने के लिए जावास्क्रिप्ट की आवश्यकता होती है।
• यदि आप शीर्ष परत बनाना चाहते हैं तो आपको z-इंडेक्स को मैन्युअल रूप से प्रबंधित करने की आवश्यकता है।

मुझे आश्चर्य हुआ कि पॉपओवर एपीआई ने इन समस्याओं का उत्तर दिया या इन्हें ठीक कर दिया और भी बहुत कुछ....

पॉपओवर एपीआई

पॉपओवर ऐसी विशेषता है जिसे किसी भी HTML विशेषता में जोड़ा जा सकता है। यहाँ एक उदाहरण है।

Toggle the popover
Popover content

पॉपओवर और तत्व के बीच मुख्य अंतर

पॉपओवर और तत्वों के बीच मुख्य अंतर यह है कि पॉपओवर हमेशा गैर-मोडल होता है। तत्व एक भूमिका = संवाद विशेषता के साथ आता है, यह भूमिका विशेषता विभिन्न HTML तत्वों से जुड़ी होती है और एक निश्चित तरीके से व्यवहार करती है। यानी h1 में एक हेडिंग भूमिका है और एक एंकर/लिंक भूमिका है। इस भूमिका का उपयोग तत्वों को निर्धारित करने के लिए स्क्रीन रीडर जैसी सहायक तकनीकों को निर्धारित करने और मदद करने के लिए किया जाता है। हालाँकि, पॉपओवर एक HTML तत्व की एक विशेषता है क्योंकि इसमें कोई डिफ़ॉल्ट भूमिका जुड़ी नहीं है। यह उपरोक्त उदाहरण में