पॉप-अप: वे अपनी जगह बना रहे हैं!

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

पॉप-अप ऐसे ही एक समस्या क्षेत्र हैं, जिन्हें ओपन यूज़र इंटरफ़ेस (यूआई) में "पॉपओवर" के रूप में बताया गया है.

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

पॉपओवर बनाते समय, अक्सर दो बड़ी समस्याएं होती हैं:

• यह कैसे पक्का करें कि यह आपके बाकी कॉन्टेंट के ऊपर किसी सही जगह पर दिखे.
• इसे ऐक्सेस करने लायक कैसे बनाया जा सकता है (कीबोर्ड-फ़्रेंडली और फ़ोकस करने लायक वगैरह).

पहले से मौजूद पॉपओवर एपीआई में कई तरह के लक्ष्य हैं. इन सभी का एक ही मुख्य लक्ष्य है कि डेवलपर इस पैटर्न को आसानी से बना सकें. इनमें ये मकसद शामिल हैं:

• दस्तावेज़ के बाकी हिस्से के ऊपर एलिमेंट और उसके डिसेंडेंट को दिखाना आसान बनाएं.
• इसे सुलभ बनाएं.
• सबसे सामान्य व्यवहारों (लाइट खारिज करना, सिंगलटन, स्टैकिंग वगैरह) के लिए JavaScript की ज़रूरत नहीं होती.

आप OpenUI साइट पर पॉप-अप की पूरी जानकारी देख सकते हैं.

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

अब आप बिल्ट-इन पॉपओवर एपीआई का इस्तेमाल कहां कर सकते हैं? यह लिखते समय, "एक्सपेरिमेंटल वेब प्लैटफ़ॉर्म फ़ीचर" फ़्लैग के पीछे Chrome कैनरी में काम करता है.

उस फ़्लैग को चालू करने के लिए, Chrome कैनरी खोलें और chrome://flags पर जाएं. इसके बाद, "प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं" फ़्लैग को चालू करें.

उन डेवलपर के लिए भी एक ऑरिजिन ट्रायल उपलब्ध है जो इस सुविधा को प्रोडक्शन एनवायरमेंट में टेस्ट करना चाहते हैं.

आखिर में, एपीआई के लिए एक polyfill डेवलपमेंट में है. github.com/oddbird/popup-polyfill पर जाकर रेपो ज़रूर देखें.

पॉप-अप के लिए सहायता पाने के लिए, इनका इस्तेमाल किया जा सकता है:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

मौजूदा समाधान

बाकी सभी चीज़ों के बजाय, अपने कॉन्टेंट का प्रमोशन करने के लिए फ़िलहाल क्या किया जा सकता है? अगर यह आपके ब्राउज़र में काम करता है, तो एचटीएमएल डायलॉग एलिमेंट का इस्तेमाल किया जा सकता है. आपको इसका इस्तेमाल "मॉडल" फ़ॉर्म में करना होगा. साथ ही, इसके लिए JavaScript का इस्तेमाल करना ज़रूरी है.

Dialog.showModal();

सुलभता सुविधाओं के बारे में कुछ बातें बताई गई हैं. हमारा सुझाव है कि a11y-dialog का इस्तेमाल करें. उदाहरण के लिए, अगर Safari 15.4 से पहले के वर्शन का इस्तेमाल कर रहे हैं.

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

• पॉपओवर दिखाने के लिए, बॉडी में कुछ कंटेनर जोड़ें.
• इसे इस तरह तैयार करें कि यह बाकी सबसे ऊपर दिखाई दे.
• कोई एलिमेंट बनाएं और पॉपओवर दिखाने के लिए, उसे कंटेनर में जोड़ें.
• डीओएम से पॉपओवर एलिमेंट हटाकर इसे छिपाएं.

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

आपका पहला पॉप-अप

आपको बस इतना ही करने की ज़रूरत है.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

लेकिन, यहां क्या हो रहा है?

• आपको पॉपओवर एलिमेंट को किसी कंटेनर या किसी भी चीज़ में रखने की ज़रूरत नहीं है. यह डिफ़ॉल्ट रूप से छिपा रहता है.
• इसे दिखाने के लिए आपको कोई JavaScript लिखने की ज़रूरत नहीं है. इसे popovertoggletarget एट्रिब्यूट की मदद से मैनेज किया जाता है.
• यह दिखने पर, इसे सबसे ऊपर की लेयर पर प्रमोट किया जाता है. इसका मतलब है कि इसे व्यूपोर्ट में document के ऊपर प्रमोट किया जाता है. आपको z-index को मैनेज करने या इस बात की चिंता करने की ज़रूरत नहीं है कि आपका पॉपओवर DOM में कहां है. इसे क्लिपिंग ऐन्सेस्टर के साथ, डीओएम में डीप डाउन के तौर पर नेस्ट किया जा सकता है. DevTools की मदद से, यह भी देखा जा सकता है कि कौनसे एलिमेंट सबसे ऊपर लेयर में मौजूद हैं. टॉप लेयर के बारे में ज़्यादा जानने के लिए, यह लेख देखें.

• आपको बॉक्स से "हल्के खारिज करें" का विकल्प मिलता है. इससे हमारा मतलब है कि आपके पास पॉपओवर को क्लोज़िंग सिग्नल से बंद करने का विकल्प है. जैसे, पॉपओवर के बाहर क्लिक करना, कीबोर्ड से किसी दूसरे एलिमेंट पर जाना या Esc बटन दबाना. इसे फिर से खोलें और इसे आज़माकर देखें!

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

उस फ़्लोट करने वाले कार्रवाई बटन की जगह तय कर दी गई है जिसकी जगह z-index है.

.fab {
  position: fixed;
  z-index: 99999;
}

पॉपओवर कॉन्टेंट को डीओएम में नेस्ट किया जाता है. हालांकि, पॉपओवर खोलने पर, वह उस तय पोज़िशन एलिमेंट के ऊपर प्रमोट हो जाता है. आपको कोई स्टाइल सेट करने की ज़रूरत नहीं है.

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

पॉपओवर की स्टाइल

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

[popover] { display: block; }

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

:open {
  display: grid;
  place-items: center;
}

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

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

अगर आपको सीएसएस ग्रिड या फ़्लेक्सबॉक्स का इस्तेमाल करके अपने पॉपओवर के अंदर कॉन्टेंट डालना है, तो इसे किसी एलिमेंट में रैप करना मददगार हो सकता है. अगर ऐसा नहीं है, तो सबसे ऊपर मौजूद लेयर में पॉपओवर के आने पर, आपको एक अलग नियम का एलान करना होगा. यह नियम display को बदल देगा. इसे डिफ़ॉल्ट रूप से सेट करने पर, display: none में डिफ़ॉल्ट रूप से बदलाव होगा.

[popover]:open {
 display: flex;
}

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

इस उदाहरण में, ट्रांज़िशन चलाने के लिए कस्टम प्रॉपर्टी का इस्तेमाल किया गया है. और आप पॉपओवर के ::backdrop में भी ट्रांज़िशन लागू कर सकते हैं.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

आपकी सलाह यह है कि मोशन के लिए मीडिया क्वेरी के तहत ट्रांज़िशन और ऐनिमेशन का ग्रुप बनाएं. इससे आपको टाइमिंग को मैनेज करने में भी मदद मिल सकती है. ऐसा इसलिए है, क्योंकि आप कस्टम प्रॉपर्टी का इस्तेमाल करके, popover और ::backdrop के बीच वैल्यू शेयर नहीं कर सकते.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

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

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

जैसा कि पहले बताया गया है, पॉप-अप एपीआई में पॉप-अप के बारे में हमारी पुरानी धारणा के अलावा भी बहुत कुछ है. इसे सभी तरह की स्थितियों के लिए बनाया जा सकता है. जैसे, सूचनाएं, मेन्यू, टूलटिप वगैरह.

इनमें से कुछ मामलों में इंटरैक्शन के अलग-अलग पैटर्न की ज़रूरत होती है. कर्सर घुमाने जैसे इंटरैक्शन. popoverhovertarget एट्रिब्यूट के इस्तेमाल की कोशिश की गई थी, लेकिन फ़िलहाल उसे लागू नहीं किया गया है.

<div popoverhovertarget="hover-popover">Hover for Code</div>

इसका आइडिया यह है कि टारगेट दिखाने के लिए किसी एलिमेंट पर कर्सर घुमाएं. इस व्यवहार को सीएसएस प्रॉपर्टी के ज़रिए कॉन्फ़िगर किया जा सकता है. ये सीएसएस प्रॉपर्टी, उस एलिमेंट पर कर्सर घुमाने और बंद करने में लगने वाले समय को तय करती हैं जिस पर पॉपओवर प्रतिक्रिया करता है. जिस डिफ़ॉल्ट कार्रवाई के साथ एक्सपेरिमेंट किया गया उसमें :hover के 0.5s के बाद पॉपओवर शो दिखाया गया. इसके बाद, इसे खारिज करने के लिए लाइट को खारिज करने या दूसरा पॉपओवर खोलने की ज़रूरत होगी. इस बारे में ज़्यादा जानकारी आगे दी गई है. ऐसा इसलिए हुआ, क्योंकि पॉपओवर छिपाने की अवधि Infinity पर सेट थी.

इस दौरान, आपके पास उस फ़ंक्शन को पॉलीफ़िल करने के लिए JavaScript का इस्तेमाल करने का विकल्प है.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopOver();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

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

यह डेमो आज़माएं, जहां टारगेट पर कर्सर घुमाकर 0.5s पर सेट किया जा सकता है.

---

इस्तेमाल के कुछ सामान्य उदाहरणों और उदाहरणों को एक्सप्लोर करने से पहले, आइए कुछ चीज़ों पर बात करते हैं.

---

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

हमने गैर-JavaScript इंटरैक्शन व्यवहार के बारे में बात की है. लेकिन कुल मिलाकर पॉपओवर के व्यवहार के बारे में क्या. अगर आपको "लाइट खारिज" सुविधा का इस्तेमाल नहीं करना है, तो क्या करें? या आपको अपने पॉपओवर पर सिंगलटन पैटर्न लागू करना है?

पॉपओवर एपीआई से आपको तीन तरह के पॉपओवर तय करने में मदद मिलती है. पॉपओवर के काम करने के तरीके अलग-अलग होते हैं.

[popover=auto]/[popover]:

• नेस्टिंग सहायता. इसका मतलब सिर्फ़ डीओएम में नेस्ट करना नहीं है. पुश्तैनी पॉपओवर की परिभाषा इस तरह है:
  • डीओएम पोज़िशन (चाइल्ड) से मिलती-जुलती है.
  • चाइल्ड एलिमेंट पर एट्रिब्यूट ट्रिगर करके, ये काम किए जा सकते हैं. जैसे, popovertoggletarget, popovershowtarget वगैरह.
  • जो anchor एट्रिब्यूट (अंडर डेवलपमेंट सीएसएस ऐंकरिंग एपीआई) से जुड़ा हो.
• लाइट को खारिज करें.
• खोलने पर, ऐसे अन्य पॉपओवर खारिज हो जाएंगे जो पहले के पॉपओवर नहीं हैं. यहां दिया गया डेमो देखें, जिसमें यह हाइलाइट किया गया है कि वंशजों के पॉपओवर का इस्तेमाल कैसे किया जाता है. देखें कि कुछ popoverhidetarget/popovershowtarget इंस्टेंस को popovertoggletarget में बदलने से चीज़ें कैसे बदलती हैं.
• किसी एक को खारिज करने पर, स्टैक में मौजूद सभी वैल्यू को खारिज कर दिया जाता है. हालांकि, स्टैक में से किसी एक को खारिज करने पर, स्टैक में मौजूद सभी कॉलम को खारिज कर दिया जाता है.

[popover=manual]:

• इससे अन्य पॉपओवर बंद नहीं होते.
• कोई लाइट खारिज नहीं की गई.
• ट्रिगर एलिमेंट या JavaScript से साफ़ तौर पर खारिज करने की ज़रूरत होती है.

JavaScript एपीआई

जब आपको अपने पॉपओवर पर ज़्यादा कंट्रोल की ज़रूरत हो, तो JavaScript की मदद से चीज़ों तक पहुंचा जा सकता है. आपको showPopover और hidePopover, दोनों तरीके मिलेंगे. आपके पास सुनने के लिए popovershow और popoverhide इवेंट भी हैं:

पॉपओवर दिखाएं js popoverElement.showPopover() पॉपओवर छिपाएं:

popoverElement.hidePopover()

दिखाए जा रहे पॉपओवर को सुनने के लिए:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

दिखाए जा रहे पॉपओवर को सुनें और उसे दिखने से रोकें:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

पॉपओवर के छिपने की आवाज़ सुनने के लिए:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

पॉपओवर को छिपाने की प्रोसेस रद्द नहीं की जा सकती:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

देखें कि पॉपओवर सबसे ऊपर की लेयर में है या नहीं:

popoverElement.matches(':open')

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

इस डेमो में ऑडियो वाले पॉपओवर हैं. इसलिए, हमें ऑडियो चलाने के लिए JavaScript की ज़रूरत होगी. क्लिक करने पर, हम पॉपओवर छिपा रहे हैं, ऑडियो चला रहे हैं, और फिर उसे फिर से दिखा रहे हैं.

सुलभता

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

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

इस डेमो को काम करने के लिए, आपको इसका "फ़ुल स्क्रीन वर्शन" खोलना होगा.

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

एंकरिंग (डेवलपमेंट के तहत)

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

हालांकि, हम चाहते हैं कि आप इसे अपनी स्टाइल के हिसाब से तय कर पाएं. इस समस्या से निपटने के लिए, Popover API के साथ एक कंपैनियन एपीआई डेवलप किया जा रहा है. "सीएसएस ऐंकर पोज़िशनिंग" एपीआई आपको एलिमेंट को अन्य एलिमेंट से टेदर करने की सुविधा देता है. साथ ही, यह इस काम में इस तरह से काम करता है कि एलिमेंट की पोज़िशन बदल दी जाए, ताकि वे व्यूपोर्ट से कट न जाएं.

यह डेमो, ऐंकरिंग एपीआई को मौजूदा स्थिति में इस्तेमाल करता है. नाव की स्थिति, व्यूपोर्ट में ऐंकर की स्थिति के हिसाब से काम करती है.

यहां सीएसएस का एक स्निपेट दिया गया है, जो यह डेमो काम कर रहा है. JavaScript की ज़रूरत नहीं है.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

आप यहां खास जानकारी देख सकते हैं. इस एपीआई के लिए एक पॉलीफ़िल भी होगा.

उदाहरण

अब आपको पता है कि पॉपओवर की सुविधा क्या है और यह कैसे काम करता है. चलिए, कुछ उदाहरण देखते हैं.

सूचनाएं

इस डेमो में, "क्लिपबोर्ड पर कॉपी करें" सूचना दिखती है.

• [popover=manual] का इस्तेमाल करता है.
• showPopover के साथ ऑन ऐक्शन पॉपओवर दिखाएं.
• 2000ms टाइम आउट के बाद, उसे hidePopover से छिपाएं.

टोस्ट

यह डेमो टोस्ट स्टाइल की सूचनाएं दिखाने के लिए सबसे ऊपर वाली लेयर का इस्तेमाल करता है.

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

नेस्ट किया गया मेन्यू

इस डेमो में दिखाया गया है कि नेस्ट किया गया नेविगेशन मेन्यू कैसे काम कर सकता है.

• [popover=auto] का इस्तेमाल करें, क्योंकि यह नेस्ट किए गए पॉपओवर की अनुमति देता है.
• कीबोर्ड पर नेविगेट करने के लिए, हर ड्रॉपडाउन के पहले लिंक पर autofocus का इस्तेमाल करें.
• यह सीएसएस ऐंकरिंग एपीआई के लिए एक अच्छा कैंडिडेट है. हालांकि, इस डेमो में कस्टम प्रॉपर्टी का इस्तेमाल करके पोज़िशन अपडेट करने के लिए, कम मात्रा में JavaScript का इस्तेमाल किया जा सकता है.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

याद रखें कि इस डेमो में autofocus का इस्तेमाल किया गया है. इसलिए, इसे "फ़ुल स्क्रीन व्यू" में खोलना होगा, ताकि कीबोर्ड नेविगेशन किया जा सके.

मीडिया पॉपओवर

इस डेमो में बताया गया है कि पॉप-अप कैसे बनाया जा सकता है.

• लाइट को खारिज करने के लिए, [popover=auto] का इस्तेमाल किया जाता है.
• JavaScript, वीडियो के play इवेंट की पहचान करता है और वीडियो को पॉप अप करता है.
• पॉपओवर popoverhide इवेंट, वीडियो को रोक देता है.

विकी स्टाइल वाले पॉपओवर

इस डेमो में बताया गया है कि मीडिया वाले इनलाइन कॉन्टेंट टूलटिप को कैसे बनाया जा सकता है.

• [popover=auto] का इस्तेमाल करता है. अगर कोई दर्शक अपने पूर्वजों के बारे में नहीं बताता है, तो एक से दूसरे को छिपा दिया जाता है.
• JavaScript के साथ pointerenter को दिखाया गया.
• CSS anchoring API के लिए एक और बढ़िया उम्मीदवार.

नेविगेशन पैनल

यह डेमो, पॉपओवर का इस्तेमाल करके नेविगेशन पैनल बनाता है.

• लाइट को खारिज करने के लिए, [popover=auto] का इस्तेमाल किया जाता है.
• पहले नेविगेशन आइटम पर फ़ोकस करने के लिए, autofocus का इस्तेमाल करता है.

बैकड्रॉप मैनेज करना

इस डेमो में बताया गया है कि ऐसे कई पॉपओवर के लिए बैकग्राउंड कैसे मैनेज किए जा सकते हैं जहां आपको सिर्फ़ एक ::backdrop दिखाना है.

• दिखने वाले पॉपओवर की सूची बनाए रखने के लिए, JavaScript का इस्तेमाल करें.
• सबसे ऊपर की लेयर में सबसे कम पॉपओवर पर क्लास का नाम लागू करें.

कर्सर की पसंद के मुताबिक पॉपओवर

इस डेमो में बताया गया है कि popover का इस्तेमाल करके, canvas को टॉप लेयर पर कैसे प्रमोट करें. साथ ही, कस्टम कर्सर को दिखाने के लिए इसका इस्तेमाल कैसे करें.

• canvas को showPopover और [popover=manual] के साथ टॉप लेयर पर प्रमोट करें.
• जब दूसरे पॉपओवर खुले हों, तो canvas पॉपओवर को छिपाएं और दिखाएं, ताकि यह पक्का हो सके कि यह सबसे ऊपर है.

ऐक्शनशीट का पॉपओवर

इस डेमो में बताया गया है कि पॉपओवर का इस्तेमाल ऐक्शनशीट के तौर पर कैसे किया जा सकता है.

• display को डिफ़ॉल्ट रूप से ओवरराइड करने के बाद, पॉपओवर दिखाएं.
• ऐक्शनशीट को पॉपओवर ट्रिगर से खोला जाता है.
• पॉपओवर दिखने पर, उसे टॉप लेयर में प्रमोट करके व्यू में बदला जाता है.
• लाइट को खारिज करने की सुविधा का इस्तेमाल करके, इसे वापस किया जा सकता है.

कीबोर्ड से चालू किया गया पॉपओवर

इस डेमो में दिखाया गया है कि कमांड पैलेट स्टाइल यूज़र इंटरफ़ेस (यूआई) के लिए, पॉपओवर का इस्तेमाल कैसे किया जा सकता है.

• पॉपओवर दिखाने के लिए, cmd + j का इस्तेमाल करें.
• input पर autofocus फ़ोकस किया गया है.
• कॉम्बो बॉक्स, मुख्य इनपुट के नीचे दूसरा popover होता है.
• अगर ड्रॉपडाउन मौजूद नहीं है, तो लाइट को खारिज करने की सुविधा से पैलेट बंद हो जाता है.
• ऐंकरिंग एपीआई के लिए एक और उम्मीदवार

तय समय पर दिखने वाला पॉपओवर

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

• कुछ समय तक कोई गतिविधि न होने के बाद, पॉपओवर दिखाने के लिए JavaScript का इस्तेमाल करें.
• पॉपओवर शो पर, टाइमर रीसेट करें.

स्क्रीन सेवर

पिछले डेमो की तरह ही, अपनी साइट में अतिरिक्त जानकारी जोड़ी जा सकती है और एक स्क्रीन सेवर जोड़ा जा सकता है.

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

कैरेट फ़ॉलो

इस डेमो में दिखाया गया है कि किसी इनपुट कैरेट के मुताबिक पॉपओवर का इस्तेमाल कैसे किया जा सकता है.

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

फ़्लोटिंग ऐक्शन बटन का मेन्यू

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

• showPopover तरीके की मदद से, manual टाइप का पॉपओवर प्रमोट करें. यह मुख्य बटन है.
• मेन्यू एक और पॉपओवर है, जो मुख्य बटन का टारगेट होता है.
• मेन्यू popovertoggletarget से खोला गया है.
• शो के पहले मेन्यू आइटम पर फ़ोकस करने के लिए, autofocus का इस्तेमाल करें.
• लाइट को बंद करने से मेन्यू बंद हो जाता है.
• आइकॉन के ट्विस्ट में :has() का इस्तेमाल किया गया है. :has() के बारे में ज़्यादा जानकारी के लिए, यह लेख पढ़ें.

हो गया!

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

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

ने “पॉप” करने के लिए धन्यवाद!

---

Unsplash पर मैडिसन ओरेन की फ़ोटो