पॉपओवर, वेब पर हर जगह मौजूद हैं. इन्हें मेन्यू, टॉगलटिप, और डायलॉग बॉक्स में देखा जा सकता है. यह खाता सेटिंग, जानकारी देने वाले विजेट, और प्रॉडक्ट कार्ड की झलक के तौर पर दिख सकता है. ये कॉम्पोनेंट बहुत ज़्यादा प्रचलित होने के बावजूद, उन्हें ब्राउज़र में बनाना अब भी बहुत मुश्किल है. आपको फ़ोकस, ओपन और क्लोज़ स्टेट को मैनेज करने, कॉम्पोनेंट में ऐक्सेस करने लायक हुक, अनुभव में शामिल होने और बाहर निकलने के लिए कीबोर्ड बाइंडिंग के लिए स्क्रिप्टिंग जोड़नी होगी, और अपने पॉपओवर का काम का, यूनीक, मुख्य फ़ंक्शन बनाना शुरू करने से पहले ही, ये सभी काम करने होंगे.
इस समस्या को हल करने के लिए, पॉपओवर बनाने के लिए डिक्लेरेटिव एचटीएमएल एपीआई का एक नया सेट ब्राउज़र में आ रहा है. इसकी शुरुआत Chromium 114 में popover API से होगी.
पॉपओवर एट्रिब्यूट
सारी सुविधाओं को खुद मैनेज करने के बजाय, ब्राउज़र को 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 वाले पॉपओवर:
- किसी दूसरे तरह के एलिमेंट को ज़बरदस्ती बंद न करें.
- फ़ोटो को खारिज न करें. टॉगल या बंद करने की कार्रवाई का इस्तेमाल करके उन्हें बंद करें.
पॉपओवर की स्टाइल
अब तक आपने एचटीएमएल में बुनियादी पॉपओवर के बारे में जाना है. हालांकि, popover के साथ कुछ अच्छी स्टाइलिंग सुविधाएं भी मिलती हैं. ::backdrop को स्टाइल देने की सुविधा भी इनमें से एक है.
auto पॉपओवर में, यह सबसे ऊपरी लेयर (जहां पॉपओवर होता है) के ठीक नीचे एक लेयर होती है. यह लेयर बाकी पेज के ऊपर मौजूद होती है. यहां दिए गए उदाहरण में, ::backdrop को आधा पारदर्शी रंग दिया गया है:
#size-guide::backdrop {
background: rgb(190 190 190 / 50%);
}
popover और dialog के बीच का अंतर
ध्यान दें कि popover एट्रिब्यूट अपने-आप सिमैंटिक नहीं देता. अब popover="auto" का इस्तेमाल करके, डायलॉग बॉक्स जैसे अनुभव बनाए जा सकते हैं. हालांकि, इन दोनों के बीच कुछ अहम अंतर हैं:
dialog.showModal (मॉडल डायलॉग) के साथ खोला गया dialog एलिमेंट, एक ऐसा अनुभव है जिसके लिए मॉडल बंद करने के लिए, साफ़ तौर पर लोगों के इंटरैक्शन की ज़रूरत होती है.
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 की ज़रूरत नहीं है!
नतीजा
पॉपओवर एपीआई, नई सुविधाओं की सीरीज़ का पहला चरण है. इसकी मदद से, वेब ऐप्लिकेशन बनाने की प्रोसेस को आसान और डिफ़ॉल्ट रूप से ज़्यादा ऐक्सेस किया जा सकता है. मैं यह देखने के लिए उत्साहित हूं कि आप पॉपओवर का इस्तेमाल कैसे करते हैं!