पॉपओवर और डायलॉग

पॉपओवर, popover एट्रिब्यूट वाला कोई भी एलिमेंट होता है. यह टूलटिप, सूचनाएं, टोस्ट वगैरह जैसे इंटरैक्टिव पैटर्न की एक बड़ी रेंज के लिए काम का होता है.

<div id="my-popover" popover>My popover content</div>

popover एट्रिब्यूट, एलिमेंट को डिफ़ॉल्ट रूप से छिपा देता है. आपको उपयोगकर्ताओं को इसे खोलने का तरीका बताना होगा. पॉपओवर को सबसे ऊपर की लेयर में रखा जाता है. यह लेयर, अन्य सभी कॉन्टेंट के ऊपर होती है. हालांकि, ये मोडल नहीं होते. इसका मतलब है कि पॉपओवर के बाहर मौजूद कॉन्टेंट के साथ अब भी इंटरैक्ट किया जा सकता है.

पॉपओवर कंट्रोल करना

अलग-अलग तरह के पॉपओवर और उनके काम करने के तरीके के बारे में जानने से पहले, यह देखें कि पॉपओवर को कैसे खोला और बंद किया जाता है.

Declaratively

बटन (और button टाइप वाले इनपुट) और popovertarget एट्रिब्यूट का इस्तेमाल करके, JavaScript का इस्तेमाल किए बिना, पॉपओवर को पूरी तरह से एचटीएमएल में कंट्रोल किया जा सकता है.

पिछले कोड स्निपेट में मौजूद पॉपओवर में id की वैल्यू my-popover है. इसका इस्तेमाल पॉपओवर को रेफ़र करने के लिए किया जा सकता है.

<button popovertarget="my-popover">Toggle</button>

popovertargetaction="show" और popovertargetaction="hide" का इस्तेमाल करके, यह भी तय किया जा सकता है कि बटन को पॉपओवर खोलना चाहिए या बंद करना चाहिए.

JavaScript की मदद से

JavaScript का इस्तेमाल करके भी पॉपओवर को कंट्रोल किया जा सकता है. यह तब काम आता है, जब आपको किसी बटन पर उपयोगकर्ता के क्लिक के अलावा किसी और चीज़ के जवाब में पॉपओवर दिखाना हो. इसके लिए, आपको पॉपओवर एलिमेंट पाना होगा. इसके बाद, showPopover(), hidePopover() या togglePopover() को कॉल करना होगा.

पॉपओवर के टाइप

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

अपने-आप दिखने वाले पॉपओवर

ऑटो पॉपओवर में सबसे ज़्यादा सुविधाएं होती हैं. अगर आपने कोई टाइप तय नहीं किया है, तो यह डिफ़ॉल्ट रूप से सेट होता है.

<div id="popover" popover>My popover</div>

कई मामलों में, एक ही समय में कई पॉपओवर खुले नहीं होने चाहिए. इसलिए, जब अपने-आप खुलने वाले पॉपओवर खुलते हैं, तो वे अन्य पॉपओवर को बंद कर देते हैं. इनमें "लाइट डिसमिस" की सुविधा भी काम करती है. इसका मतलब है कि अगर पॉपओवर के बाहर क्लिक किया जाता है, तो यह अपने-आप बंद हो जाता है. इसे Esc बटन से भी बंद किया जा सकता है.

मैन्युअल पॉप-ओवर

ऑटो पॉपओवर की सुविधा, इस्तेमाल के कई मामलों में काम आती है. हालांकि, कुछ मामलों में आपको पॉपओवर पर ज़्यादा कंट्रोल चाहिए हो सकता है. मैन्युअल पॉपओवर की मदद से, आपको ज़्यादा कंट्रोल मिलता है. साथ ही, आपको ज़्यादातर व्यवहार के लिए भी ज़िम्मेदार ठहराया जाता है.

<div id="popover" popover="manual">My popover</div>

यह पॉपओवर सिर्फ़ तब बंद होगा, जब इसे बंद करने का साफ़ तौर पर निर्देश दिया जाएगा. इसे लाइट डिसमिस या Esc बटन से बंद नहीं किया जा सकता. हालांकि, इससे एक साथ कई पॉपओवर खोले जा सकते हैं.

संकेत देने वाले पॉपओवर

अपने पेज पर टूलटिप जोड़ने के लिए, पॉपओवर का इस्तेमाल भी किया जा सकता है. इस पैटर्न में, आपको किसी आइटम पर कर्सर घुमाने पर उसकी जानकारी दिखनी चाहिए. एक बार में सिर्फ़ एक ही टैब खुला होना चाहिए. अगर ऑटो पॉपओवर का इस्तेमाल किया जाता है, तो एक ऑटो पॉपओवर खोलने पर, खुले हुए अन्य ऑटो पॉपओवर बंद हो जाएंगे. मैन्युअल पॉपओवर का इस्तेमाल करने पर, आपको कई तरह के व्यवहार को मैन्युअल तरीके से लागू करना होगा. इनमें अन्य पॉपओवर बंद करना भी शामिल है. सलाह देने वाले पॉपओवर, तीसरा विकल्प देते हैं. इनका व्यवहार, अपने-आप दिखने वाले पॉपओवर जैसा होता है. हालांकि, हिंट वाला पॉपओवर खोलने पर, अपने-आप दिखने वाले पॉपओवर बंद नहीं होते.

<div id="popover" popover="hint">My popover</div>

सलाह देने वाले पॉप-ओवर, मुख्य कॉन्टेंट के साथ-साथ अन्य जानकारी देने के लिए काम के होते हैं. आपको अक्सर, क्लिक न किए जाने वाले इवेंट (जैसे कि होवर या फ़ोकस) के साथ हिंट पॉपओवर ट्रिगर करने होते हैं.

अपने पॉपओवर को पोज़िशन करना

डिफ़ॉल्ट रूप से, आपके पॉपओवर स्क्रीन के बीच में खुलेंगे. इन्हें सबसे ऊपर वाली लेयर में जोड़ा जाता है. यह लेयर, आपके अन्य सभी कॉन्टेंट के ऊपर होती है. साथ ही, इन्हें व्यूपोर्ट के हिसाब से सेट किया जा सकता है.

हालांकि, यह हमेशा सही नहीं होता, क्योंकि अक्सर आपको पॉपओवर को उस आइटम के पास रखना होता है जो उन्हें ट्रिगर करता है. ऐंकर की पोज़िशन तय करने की सुविधा का इस्तेमाल करके ऐसा किया जा सकता है.

ऐंकर की पोज़िशन तय करने के दो चरण होते हैं. पहला, ऐंकर एलिमेंट तय करना और दूसरा, उस ऐंकर के हिसाब से एलिमेंट को रखना. पॉपओवर, पहले चरण को हैंडल कर सकते हैं. इसके लिए, वे आपके लिए इंप्लिसिट ऐंकर सेट करते हैं. <button popovertarget> का इस्तेमाल करके पॉपओवर खोलने पर, बटन इंप्लिसिट ऐंकर होता है. अगर JavaScript का इस्तेमाल करके पॉपओवर खोला जा रहा है, तो source विकल्प की मदद से इंप्लिसिट ऐंकर सेट किया जा सकता है.

डिफ़ॉल्ट रूप से, पॉपओवर को margin: auto का इस्तेमाल करके बीच में रखा जाता है. एंकर पोज़िशनिंग का इस्तेमाल करने के लिए, आपको margin: unset सेट करके उस सेटिंग को बदलना होगा.

स्टाइल और ऐनिमेशन

::backdrop स्यूडो एलिमेंट

पॉपओवर, आपकी साइट के पेज पर मौजूद अन्य सभी कॉन्टेंट के ऊपर खुलते हैं. पॉपओवर के नीचे, ::backdrop स्यूडो एलिमेंट होता है. इसे स्टाइल किया जा सकता है.

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

:popover-open सूडो क्लास

मान लें कि आपको सीएसएस ग्रिड का इस्तेमाल करके, पॉपओवर कॉन्टेंट का लेआउट बनाना है. [popover]{ display: grid } जोड़ने पर, अचानक आपके सभी पॉपओवर दिखने लगते हैं. ऐसा इसलिए होता है, क्योंकि display: none का इस्तेमाल करके पॉपओवर छिपाए जाते हैं. :popover-open सूडो क्लास का इस्तेमाल करके, स्टाइल सिर्फ़ तब लागू किए जा सकते हैं, जब पॉपओवर खुला हो.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open, पॉपओवर को ऐनिमेट करने के लिए भी काम का होता है.

पॉपओवर में ऐनिमेशन जोड़ना

पॉपओवर के ऐनिमेशन में तीन चरण होते हैं:

1. @starting-style {popover:popover-open { } }-पॉपओवर दिखने के तुरंत बाद, उसके शुरुआती स्टाइल. ध्यान दें कि इसे #2 के बाद, अपनी स्टाइलशीट में तय करना होगा.
2. popover:popover-open { }-पॉपओवर के खुले होने पर उसके स्टाइल.
3. popover { }-पॉपओवर बंद होने पर, यह स्टाइल पर जाता है.

जब पॉपओवर खुला नहीं होता है, तब display: none का इस्तेमाल करके उसे छिपाया जाता है. इसे ऐनिमेट करने के लिए, आपको transition-behavior: allow-discrete को सेट करना होगा. साथ ही, transition में मौजूद प्रॉपर्टी की सूची में display को भी जोड़ना होगा.

अगर आपको इंप्लिसिट ऐंकर का इस्तेमाल करके पॉपओवर को पोज़िशन करना है, तो आपको transition में मौजूद प्रॉपर्टी की सूची में overlay को भी जोड़ना होगा. पॉपओवर को टॉप लेयर से हटाने पर, इंप्लिसिट ऐंकर रिलेशनशिप हट जाता है. इसलिए, overlay प्रॉपर्टी में ट्रांज़िशन जोड़ने से, यह तब तक नहीं हटता, जब तक एग्ज़िट ट्रांज़िशन पूरा नहीं हो जाता.

पॉपओवर के बीच इंटरैक्शन

किसी पेज पर एक से ज़्यादा पॉपओवर हो सकते हैं. ये किस तरह से इंटरैक्ट करते हैं, यह इनके टाइप और इस्तेमाल करने के तरीके पर निर्भर करता है.

नेस्ट किए गए पॉपओवर

कुछ मामलों में, आपको किसी दूसरे पॉपओवर के अंदर से पॉपओवर खोलने की ज़रूरत पड़ सकती है. उदाहरण के लिए, आपके पास एक पॉपओवर मेन्यू हो सकता है. साथ ही, मेन्यू के किसी आइटम से एक सबमेन्यू खुलता हो. जब उपयोगकर्ता मुख्य मेन्यू बंद कर दे, तो आपको सब-मेन्यू को खुला नहीं रखना है. पॉपओवर की मदद से, इसे अपने-आप मैनेज किया जा सकता है.

अगर किसी हिंट पॉपओवर से कोई हिंट पॉपओवर या किसी ऑटो पॉपओवर से कोई ऑटो पॉपओवर खोला जाता है, तो पॉपओवर को स्टैक में रखा जाता है. किसी पॉपओवर को बंद करने पर, स्टैक में उसके बाद के सभी पॉपओवर भी बंद हो जाते हैं. यह लाइट डिसमिस के साथ भी काम करता है. अगर किसी पॉपओवर पर क्लिक किया जाता है, तो स्टैक में उसके बाद के सभी पॉपओवर बंद हो जाएंगे. हालांकि, पहले के पॉपओवर खुले रहेंगे.

अगर किसी पॉपओवर का सोर्स एलिमेंट, किसी पॉपओवर के अंदर है, तो उसे स्टैक में जोड़ दिया जाता है. बटन पर popovertarget का इस्तेमाल करने पर, सोर्स एलिमेंट अपने-आप सेट हो जाता है. इसके अलावा, JavaScript की मदद से भी इसे सेट किया जा सकता है. इसके लिए, .showPopover({source}) या .togglePopover({source}) को कॉल करते समय, source विकल्प को सेट करें.

ऑटो पॉपओवर के लिए एक स्टैक होता है. साथ ही, हिंट पॉपओवर के लिए एक अलग स्टैक होता है. हालांकि, अगर ऑटो पॉपओवर के अंदर से कोई हिंट पॉपओवर खोला जाता है, तो वह ऑटो स्टैक में जुड़ जाता है.

ध्यान रखें कि हिंट पॉपओवर का इस्तेमाल, आसान और कुछ समय के लिए दिखने वाली जानकारी देने के लिए किया जाता है. इसलिए, हिंट पॉपओवर से अपने-आप दिखने वाले पॉपओवर को ट्रिगर नहीं किया जा सकता.

अगर मैन्युअल पॉप-ओवर का इस्तेमाल किया जा रहा है, तो आपको यह सब मैन्युअल तरीके से मैनेज करना होगा.

अन्य पॉपओवर टाइप बंद करना

आपने सीखा कि अपने-आप खुलने वाले पॉपओवर को खोलने पर, अपने-आप खुलने वाले अन्य पॉपओवर बंद हो जाते हैं. हालांकि, अलग-अलग तरह के पॉपओवर कैसे काम करते हैं? यहां एक ऐसे पेज का उदाहरण दिया गया है जिसमें तीनों तरह की कुकी का इस्तेमाल किया गया है. यहां एक नेविगेशन मेन्यू है. इसमें ऐसे बटन हैं जो अपने-आप दिखने वाले पॉपओवर का इस्तेमाल करके खुलते और बंद होते हैं. पेज पर ऐसा टेक्स्ट मौजूद है जो कॉन्टेक्स्ट के हिसाब से टूलटिप दिखाने के लिए, हिंट पॉपओवर का इस्तेमाल करता है. आखिर में, मैन्युअल पॉपओवर के साथ एक सूचना दी जाती है, ताकि उपयोगकर्ता को पता चल सके कि बैकग्राउंड टास्क पूरा हो गया है.

टूलटिप कुछ समय के लिए दिखती हैं. ये तब दिखती हैं, जब हम टेक्स्ट पर माउस ले जाते हैं. हमें उम्मीद है कि एक बार में सिर्फ़ एक टूलटिप दिखेगी. साथ ही, दूसरा हिंट पॉपओवर ट्रिगर करने पर, पहला बंद हो जाएगा.

किसी बटन पर क्लिक करके मेन्यू खोलने पर, दो वजहों से यह जानकारी बंद हो जाती है. सबसे पहले, हिंट के बाहर क्लिक करने पर, हिंट अपने-आप बंद हो जाता है. दूसरा, अपने-आप दिखने वाले पॉपओवर को खोलने पर, खुले हुए सभी हिंट पॉपओवर बंद हो जाते हैं. ऐसा इसलिए होता है, क्योंकि उपयोगकर्ता ने उस चीज़ पर फ़ोकस करना बंद कर दिया है जिसके लिए उसे हिंट पॉपओवर दिखाया गया था. इसलिए, अब वह कॉन्टेंट उसके काम का नहीं है. इसका मतलब है कि अगर आपने ऑटो पॉपओवर पर showPopover() को कॉल किया, तो खुला हुआ कोई भी हिंट पॉपओवर बंद हो जाएगा.

ड्रॉप-डाउन मेन्यू, अपने-आप दिखने वाले पॉपओवर होते हैं. ड्रॉप-डाउन मेन्यू में, एक बार में सिर्फ़ एक मेन्यू खुला होना चाहिए. एक मेन्यू खोलने पर, दूसरा मेन्यू बंद हो जाता है. जैसा कि आपने देखा, अपने-आप दिखने वाले पॉपओवर को खोलने पर, खुले हुए सभी हिंट पॉपओवर भी बंद हो जाते हैं.

हालांकि, ड्रॉप-डाउन मेन्यू खुला होने पर भी, आपको किसी दूसरी टूलटिप का कॉन्टेंट देखना पड़ सकता है. संकेत देने वाली टूलटिप दिखाने से, अपने-आप दिखने वाले पॉपओवर बंद नहीं होते.

मैन्युअल पॉपओवर पर, अपने-आप दिखने वाले या हिंट वाले पॉपओवर का कोई असर नहीं पड़ता. साथ ही, जब यह खुलता है, तो यह किसी भी हिंट या अपने-आप दिखने वाले पॉपओवर को बंद नहीं करता. हालांकि, अगर आपने किसी बटन पर क्लिक करके मैन्युअल पॉपओवर खोला है, तो इससे हिंट और अपने-आप खुलने वाले पॉपओवर बंद हो जाते हैं.

पॉपओवर टाइप के बीच इंटरैक्शन जटिल लग सकते हैं. हालांकि, अगर सही स्थितियों में टाइप का इस्तेमाल किया जाता है, तो ये इंटरैक्शन इस्तेमाल के सामान्य पैटर्न की अनुमति देते हैं. अगर आपके पॉपओवर उम्मीद के मुताबिक इंटरैक्ट नहीं कर रहे हैं, तो दोबारा देखें कि आपने किस तरह के पॉपओवर का इस्तेमाल किया है.

देखें कि आपको कितना समझ आया