पॉपओवर, वेब पर हर जगह मौजूद होते हैं. इन्हें मेन्यू, टॉगलटिप, और डायलॉग बॉक्स में देखा जा सकता है. ये खाते सेटिंग, जानकारी देने वाले विजेट, और प्रॉडक्ट कार्ड की झलक के तौर पर दिख सकते हैं. ये कॉम्पोनेंट ज़्यादा लोकप्रिय होने के बाद भी, ब्राउज़र में इन्हें बनाना काफ़ी मुश्किल काम है. आपको फ़ोकस, ओपन और क्लोज़ स्टेटस, कॉम्पोनेंट में ऐक्सेस किए जा सकने वाले हुक, और अनुभव में शामिल होने और उससे बाहर निकलने के लिए कीबोर्ड बाइंडिंग को मैनेज करने के लिए स्क्रिप्टिंग जोड़नी होगी. इसके अलावा, आपको अपने पॉपओवर के काम के, यूनीक, और मुख्य फ़ंक्शन को तैयार करने से पहले भी इन बातों का ध्यान रखना होगा.
इस समस्या को हल करने के लिए, पॉपओवर बनाने के लिए डिक्लेरेटिव एचटीएमएल एपीआई का नया सेट, ब्राउज़र पर उपलब्ध होगा. इसकी शुरुआत Chromium 114 में popover एपीआई से होगी.
पॉपओवर एट्रिब्यूट
सभी जटिलता को खुद मैनेज करने के बजाय, ब्राउज़र को popover एट्रिब्यूट और बाद की सुविधाओं के सेट का इस्तेमाल करके इसे मैनेज करने दें. एचटीएमएल पॉपओवर सहायता:
- टॉप लेयर का प्रमोशन. पॉपओवर, पेज के बाकी हिस्से के ऊपर एक अलग लेयर पर दिखेंगे, ताकि आपको z-इंडेक्स होने की ज़रूरत न पड़े.
- खारिज करने की सुविधा को हल्के से इस्तेमाल करना. पॉपओवर एरिया के बाहर क्लिक करने से, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
- डिफ़ॉल्ट फ़ोकस मैनेजमेंट. पॉपओवर खोलने से, पॉपओवर में अगला टैब रुक जाता है.
- कीबोर्ड बाइंडिंग को ऐक्सेस किया जा सकता है.
escबटन दबाने से पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा. - ऐक्सेस किए जा सकने वाले कॉम्पोनेंट बाइंडिंग. पॉपओवर एलिमेंट को पॉपओवर से कनेक्ट करना, सिमैंटिक तौर पर ट्रिगर होता है.
अब JavaScript का इस्तेमाल किए बिना, इन सभी सुविधाओं वाले पॉपओवर बनाए जा सकते हैं. एक बेसिक पॉपओवर के लिए तीन चीज़ों की ज़रूरत होती है:
- पॉपओवर वाले एलिमेंट में
popoverएट्रिब्यूट. - पॉपओवर वाले एलिमेंट पर मौजूद
id. - पॉपओवर खोलने वाले एलिमेंट पर मौजूद, पॉपओवर की
idवैल्यू वालाpopovertarget.
<button popovertarget="my-popover"> Open Popover </button>
<div id="my-popover" popover>
<p>I am a popover with more information.</p>
</div>
अब आपके पास पूरी तरह से काम करने वाला बेसिक पॉपओवर है.
इस पॉपओवर का इस्तेमाल, ज़्यादा जानकारी देने या जानकारी देने वाले विजेट के तौर पर किया जा सकता है.
डिफ़ॉल्ट और बदलाव
डिफ़ॉल्ट रूप से, जैसे कि पिछले कोड स्निपेट में, popovertarget के साथ पॉपओवर सेट अप करने का मतलब है कि पॉपओवर को खोलने वाला बटन या एलिमेंट, टॉगल को खोलकर बंद कर देगा. हालांकि, popovertargetaction का इस्तेमाल करके अश्लील पॉपओवर भी बनाए जा सकते हैं. यह डिफ़ॉल्ट टॉगल कार्रवाई को बदल देता है. popovertargetaction विकल्पों में ये शामिल हैं:
popovertargetaction="show": पॉपओवर दिखाता है.
popovertargetaction="hide": पॉपओवर छिपाता है.
popovertargetaction="hide" का इस्तेमाल करके, पॉपओवर में “बंद करें” बटन बनाया जा सकता है, जैसा कि इस स्निपेट में है:
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Close</span>
</button>
ऑटो बनाम मैन्युअल पॉपओवर
popover एट्रिब्यूट का खुद से इस्तेमाल करने से, असल में popover="auto" का शॉर्टकट बन जाता है. इसे खोलने पर, डिफ़ॉल्ट popover अपने-आप बनने वाले अन्य पॉपओवर को बंद कर देगा. हालांकि, एंसेस्टर के पॉपओवर को बंद किया जा सकता है. इसे लाइट-खारिज या 'बंद करें' बटन का इस्तेमाल करके खारिज किया जा सकता है.
वहीं दूसरी ओर, popover=manual को सेट करने से एक और तरह का पॉपओवर बन जाता है: मैन्युअल पॉपओवर. ये किसी भी अन्य तरह के एलिमेंट को ज़बरदस्ती बंद नहीं करते और न ही लाइट-खारिज करके बंद करते हैं. आपको उन्हें टाइमर या बंद करने की कार्रवाई से बंद करना होगा. popover=manual के लिए सही पॉपओवर ऐसे एलिमेंट होते हैं जो दिखते और गायब हो जाते हैं. हालांकि, इनका असर पेज के बाकी हिस्से पर नहीं पड़ता, जैसे कि टोस्ट की सूचना.
अगर ऊपर दिया गया डेमो एक्सप्लोर किया जाता है, तो यह देखा जा सकता है कि पॉपओवर एरिया के बाहर क्लिक करने से, पॉपओवर लाइट खारिज नहीं होता. इसके अलावा, अगर अन्य पॉपओवर खुले थे, तो वे बंद नहीं होंगे.
दोनों के अंतर की समीक्षा करने के लिए:
popover=auto वाले पॉपओवर:
- खोलने पर, अन्य पॉपओवर को ज़बरदस्ती बंद करें.
- इसे लाइट खारिज किया जा सकता है.
popover=manual वाले पॉपओवर:
- किसी भी अन्य तरह के एलिमेंट को ज़बरदस्ती बंद न करें.
- रोशनी को खारिज न करें. टॉगल या बंद कार्रवाई का इस्तेमाल करके, उन्हें बंद करें.
पॉपओवर स्टाइल करना
अभी तक आपने HTML में बेसिक पॉपओवर के बारे में जाना है. हालांकि, popover के साथ कुछ अच्छी स्टाइलिंग भी मिलती हैं. इनमें से एक सुविधा है, ::backdrop को स्टाइल देना.
auto पॉपओवर में, यह ऊपरी लेयर (जहां पॉपओवर होता है) के ठीक नीचे की एक लेयर होती है. यह लेयर, पेज के बाकी हिस्से के ऊपर मौजूद होती है. यहां दिए गए उदाहरण में, ::backdrop को आधा-पारदर्शी रंग दिया गया है:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
popover और dialog के बीच का अंतर
यह ध्यान देना ज़रूरी है कि popover एट्रिब्यूट खुद ही सिमेंटिक्स नहीं देता है. अब popover="auto" का इस्तेमाल करके, डायलॉग जैसी मोड वाली सुविधाएं बनाई जा सकती हैं. हालांकि, इन दोनों में कुछ मुख्य अंतर हैं:
dialog एलिमेंट को dialog.showModal के साथ खोला जाता है (मॉडल डायलॉग), एक ऐसा अनुभव है जिसमें मोडल को बंद करने के लिए, उपयोगकर्ता के साफ़ तौर पर इंटरैक्शन की ज़रूरत होती है.
popover, लाइट खारिज करने की सुविधा का इस्तेमाल करता है. मॉडल dialog ऐसा नहीं करता.
मॉडल डायलॉग, बचे हुए पेज को इनर्ट करता है. popover में ऐसा नहीं होता.
ऊपर दिया गया डेमो, पॉपओवर व्यवहार के साथ सिमैंटिक डायलॉग है. इसका मतलब है कि पेज का बाकी हिस्सा इनऐक्टिव नहीं है और डायलॉग पॉपओवर में लाइट खारिज कर दी जाती है. नीचे दिए गए कोड का इस्तेमाल करके, इस डायलॉग बॉक्स को पॉपओवर तरीके से बनाया जा सकता है:
<button popovertarget="candle-01">
Quick Shop
</button>
<dialog popover id="candle-01">
<button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
<div class="product-preview-container">
...
</div>
</dialog>
यह सुविधा जल्द ही उपलब्ध होगी
इंटरैक्टिव एंट्री और एग्ज़िट
फ़िलहाल, अलग-अलग प्रॉपर्टी को ऐनिमेट करने की सुविधा, ब्राउज़र में उपलब्ध नहीं है. इसमें, display: none पर ऐनिमेट करना और सबसे ऊपर की लेयर को ऐनिमेट करना शामिल है. हालांकि, इस रिलीज़ के ठीक बाद, इन्हें Chromium के आने वाले वर्शन के लिए प्लान किया गया है.
अलग-अलग प्रॉपर्टी को ऐनिमेट करने और :popover-open और @starting-style का इस्तेमाल करने की सुविधा की मदद से, बदलाव से पहले और बाद में बदलाव करने के स्टाइल सेट अप किए जा सकेंगे. इससे पॉपओवर खोलते और बंद करते समय, ट्रांज़िशन में कोई रुकावट नहीं आएगी. पिछला उदाहरण देखें. इसे ऐनिमेट करना ज़्यादा आसान होता है. साथ ही, इससे उपयोगकर्ताओं को बेहतर अनुभव मिलता है:
ऐंकर पोज़िशन
पॉपओवर तब बेहतरीन होते हैं, जब व्यूपोर्ट के आधार पर सूचना, मॉडल या सूचना को पोज़िशन करना हो. हालांकि, पॉपओवर मेन्यू, टूलटिप, और ऐसे अन्य एलिमेंट के लिए भी काम के होते हैं जिन्हें अन्य एलिमेंट के साथ रखा जाना चाहिए. यहीं से सीएसएस ऐंकरिंग काम आती है.
नीचे दिए गए रेडियल मेन्यू डेमो में सीएसएस ऐंकर पोज़िशनिंग के साथ पॉपओवर एपीआई का इस्तेमाल किया जाता है. इससे यह पक्का किया जाता है कि पॉपओवर #menu-items, अपने टॉगल ट्रिगर, #menu-toggle बटन से हमेशा ऐंकर रहे.
ऐंकर सेट अप करना, पॉपओवर सेट अप करने जैसा ही है:
<button id="menu-toggle" popovertarget="menu-items">
Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
<li class="item">...</li>
<li class="item">...</li>
</ul>
ऐंकर को id (इस उदाहरण में, #menu-toggle) देकर सेट अप किया जाता है. इसके बाद, दो एलिमेंट को जोड़ने के लिए anchor="menu-toggle" का इस्तेमाल किया जाता है. अब पॉपओवर को स्टाइल देने के लिए, anchor() का इस्तेमाल किया जा सकता है. ऐंकर टॉगल की बेसलाइन से ऐंकर किए गए पॉपओवर मेन्यू को इस तरह से स्टाइल किया जा सकता है:
#menu-items {
bottom: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
अब आपके पास पूरी तरह से काम करने वाला पॉपओवर मेन्यू है, जो टॉगल बटन के साथ लगा है. साथ ही, इसमें पॉपओवर की सभी पहले से मौजूद सुविधाएं मौजूद हैं. इसके लिए, किसी JavaScript की ज़रूरत नहीं है!
नतीजा
पॉपओवर एपीआई, नई सुविधाओं की सीरीज़ का पहला चरण है. इससे, वेब ऐप्लिकेशन को मैनेज करना आसान हो जाता है और वे डिफ़ॉल्ट रूप से ज़्यादा से ज़्यादा लोगों तक पहुंच पाते हैं. मैं यह देखने के लिए उत्सुक हूं कि आप पॉपओवर का इस्तेमाल कैसे करते हैं!