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

Jhey Tompkins

का इस्तेमाल करने के लिए, रेफ़रंस अपडेट कर दिए गए हैं.

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

ऐसी ही एक समस्या पॉप-अप है. Open UI में इसे "पॉपओवर" कहा जाता है.

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

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

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

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

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

OpenUI साइट पर जाकर, पॉप-अप की सभी ज़रूरी शर्तें देखी जा सकती हैं.

ब्राउज़र के साथ काम करना

अब पहले से मौजूद Popover API का इस्तेमाल कहां किया जा सकता है? यह सुविधा, Chrome Canary में "वेब प्लैटफ़ॉर्म की नई सुविधाएं" फ़्लैग के पीछे उपलब्ध है.

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

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

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

पॉप-अप सहायता पाने के लिए, यह तरीका अपनाएं:

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

मौजूदा सलूशन

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

Dialog.showModal();

सुलभता से जुड़ी कुछ बातें ध्यान में रखें. हमारा सुझाव है कि a11y-dialog का इस्तेमाल करें. उदाहरण के लिए, अगर आपको Safari के 15.4 से पहले के वर्शन का इस्तेमाल करने वाले लोगों के लिए कॉन्टेंट उपलब्ध कराना है.

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

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

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

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

इसके लिए आपको बस इतना ही करना है.

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

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

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

DevTools की टॉप लेयर की सहायता का उदाहरण देने वाला GIF

  • आपको "लाइट डिसमिज़" सुविधा पहले से ही मिलती है. इसका मतलब है कि पॉपओवर को बंद करने के लिए, किसी सिग्नल का इस्तेमाल किया जा सकता है. जैसे, पॉपओवर के बाहर क्लिक करना, कीबोर्ड से किसी दूसरे एलिमेंट पर जाना या 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 API की मदद से, तीन तरह के पॉपओवर तय किए जा सकते हैं. ये तीनों पॉपओवर अलग-अलग तरह से काम करते हैं.

[popover=auto]/[popover]:

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

[popover=manual]:

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

JavaScript API

अगर आपको अपने पॉपओवर पर ज़्यादा कंट्रोल चाहिए, तो 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 की ज़रूरत होगी. क्लिक करने पर, हम पॉपओवर को छिपा रहे हैं, ऑडियो चला रहे हैं, और फिर से दिखा रहे हैं.

देखें

सुलभता

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

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

देखें

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

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

ऐंकरिंग (इस पर काम चल रहा है)

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

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

इस डेमो में, Anchoring 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 टाइप वाला एक पॉपओवर, कंटेनर के तौर पर काम करता है.
  • नई सूचनाएं पॉपओवर में जोड़ दी जाती हैं और पॉपओवर दिखाया जाता है.
  • वेब ऐनिमेशन एपीआई की मदद से, क्लिक करने पर इन्हें हटा दिया जाता है और डीओएम से भी हटा दिया जाता है.
  • अगर कोई टॉस्ट नहीं दिखाना है, तो पॉपओवर छिप जाता है.

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

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

  • [popover=auto] का इस्तेमाल करें, क्योंकि इससे नेस्ट किए गए पॉपओवर की सुविधा मिलती है.
  • कीबोर्ड पर नेविगेट करने के लिए, हर ड्रॉपडाउन के पहले लिंक पर autofocus का इस्तेमाल करें.
  • यह CSS Anchoring API के लिए एक बेहतरीन उम्मीदवार है. हालांकि, इस डेमो के लिए, कस्टम प्रॉपर्टी का इस्तेमाल करके पोज़िशन अपडेट करने के लिए, थोड़े से 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 का इस्तेमाल करें.
  • सबसे ऊपर की लेयर में सबसे नीचे के पॉपओवर पर क्लास का नाम लागू करें.
देखें

कस्टम कर्सर पॉपओवर

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

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

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

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

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

कीबोर्ड से चालू होने वाला पॉपओवर

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

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

टाइमस्टैंप के हिसाब से पॉपओवर

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

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

स्क्रीन सेवर

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

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

कैरेट फ़ॉलो

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

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

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

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

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

हो गया!

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

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

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

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