वेब पर हर जगह पॉपओवर मौजूद होते हैं. इन्हें मेन्यू, टॉगलटिप, और डायलॉग में देखा जा सकता है. इनका इस्तेमाल खाता सेटिंग, डिसक्लोज़र विजेट, और प्रॉडक्ट कार्ड की झलक जैसी सुविधाओं के लिए किया जाता है. ये कॉम्पोनेंट काफ़ी लोकप्रिय हैं. हालांकि, इन्हें ब्राउज़र में बनाना अब भी काफ़ी मुश्किल है. इस समस्या को हल करने के लिए, ब्राउज़र में पॉपओवर बनाने के लिए, एचटीएमएल एपीआई का नया सेट उपलब्ध कराया जा रहा है. इनमें से पहला एपीआई, Popover API है.
पॉपओवर को अक्सर डायलॉग समझ लिया जाता है. हालांकि, दोनों के काम करने के तरीके में कुछ अहम अंतर हैं. dialog.showModal (मॉडल डायलॉग) की मदद से खोला गया dialog एलिमेंट, एक ऐसा अनुभव है जिसमें मॉडल को बंद करने के लिए, उपयोगकर्ता के इंटरैक्शन की ज़रूरत होती है. popover में लाइट डिसमिस की सुविधा काम करती हो. मोडल dialog ऐसा नहीं करता.
मॉडल डायलॉग की वजह से, पेज का बाकी हिस्सा काम नहीं करता. popover नहीं करता.
दोनों के अंतर के बारे में ज़्यादा जानें.
यह लेख एक सीरीज़ का हिस्सा है. इसमें बताया गया है कि ई-कॉमर्स कंपनियों ने सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं का इस्तेमाल करके, अपनी वेबसाइट को कैसे बेहतर बनाया. इस लेख में जानें कि Tokopedia ने Popover API को कैसे लागू किया और इससे उसे क्या फ़ायदे मिले.
Tokopedia
पॉपओवर एट्रिब्यूट का इस्तेमाल करने से, React में कोड की लाइनें 70% तक कम हो गईं. मोडल को नेटिव तौर पर एचटीएमएल से कंट्रोल किया जा सकता है. इसके लिए, JavaScript में इवेंट हैंडलिंग की ज़रूरत नहीं होती. साथ ही, मोडल डीओएम को
document.bodyके आखिर में ले जाने के लिएReact.createPortalका इस्तेमाल करने की ज़रूरत नहीं होती. हम@starting-styleका इस्तेमाल, पॉपओवर को ऐनिमेट करने के लिए भी कर सकते हैं.—एंड्री विहालिम, सीनियर सॉफ़्टवेयर इंजीनियर, Tokopedia.
Tokopedia के प्रॉडक्ट के बारे में ज़्यादा जानकारी वाले पेजों (पीडीपी) पर, हर प्रॉडक्ट के लिए कई इमेज मौजूद होती हैं. प्रॉडक्ट के थंबनेल पर क्लिक करने पर, एक मोडल खुलता है. इसमें बड़ी इमेज दिखती है. यह ई-कॉमर्स वेबसाइटों में इस्तेमाल किया जाने वाला एक सामान्य पैटर्न है.
कोड
Tokopedia, फ़्रंटएंड डेवलपमेंट के लिए React का इस्तेमाल करता है. इस मॉडल के लिए Popover API लागू करने से पहले, उन्होंने DOM मॉडल और बटन का इस्तेमाल किया था. बटन ने React की स्थिति को बदलकर, मॉडल को खोल दिया. पॉपओवर एपीआई की मदद से, वे उस एलिमेंट में popovertarget एट्रिब्यूट तय करते हैं जो पॉपओवर को खोलता है. इसकी वैल्यू, पॉपओवर एलिमेंट के आईडी के बराबर होती है.
इस बुनियादी तरीके से लागू करने पर, पॉपओवर काम करता है. हालांकि, यह बिना किसी ऐनिमेशन के दिखता और गायब हो जाता है. पॉपओवर के लिए, आसानी से दिखने और गायब होने वाला ऐनिमेशन बनाने के लिए, :popover-open और @starting-style का इस्तेमाल करें. साथ ही, अलग-अलग प्रॉपर्टी के ऐनिमेशन की अनुमति दें.
यहां दिए गए कोड के उदाहरण में, transform: 'scale()' प्रॉपर्टी का इस्तेमाल करके पॉपओवर को छोटा और बड़ा किया गया है.
इस कोड के उदाहरण में, Popover API के लिए एंट्री और एग्ज़िट ऐनिमेशन लागू करने का तरीका बताया गया है.
<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />
export const cssModalWrapper = css({
background: NN0,
border: 'none',
borderRadius: '.625rem',
width: 1024,
padding: 24,
'&::backdrop': {
opacity: 0,
transitionProperty: 'opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
},
transitionProperty: 'transform, opacity, display',