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

Jhey Tompkins

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

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

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

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

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

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

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

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

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

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

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

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

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

इनके साथ पॉप-अप सहायता की जांच की जा सकती है:

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

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

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

Dialog.showModal();

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

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

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

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

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

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

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

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

• आपको पॉपओवर एलिमेंट को किसी कंटेनर या किसी अन्य चीज़ में डालने की ज़रूरत नहीं है. यह डिफ़ॉल्ट रूप से छिपा होता है.
• इसे दिखाने के लिए आपको कोई JavaScript लिखने की ज़रूरत नहीं है. इसे popovertoggletarget एट्रिब्यूट की मदद से मैनेज किया जाता है.
• दिखाई देने पर, यह टॉप लेयर पर प्रमोट हो जाता है. इसका मतलब है कि इसका प्रमोशन, व्यूपोर्ट में document से ऊपर होता है. आपको z-index को मैनेज करने या इस बात की चिंता करने की ज़रूरत नहीं है कि डीओएम में आपका पॉपओवर कहां है. इसे क्लिपिंग ऐन्सेस्टर की मदद से, डीओएम में गहराई से नेस्ट किया जा सकता है. 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 का pseudo-selector, उन पॉपओवर से मैच करता है जो दिख रहे हैं (इसलिए, सबसे ऊपर की लेयर में दिखते हैं).

इस उदाहरण में, ट्रांज़िशन चलाने के लिए कस्टम प्रॉपर्टी का इस्तेमाल किया गया है. पॉपओवर की ::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]:

• Nesting समर्थन. इसका मतलब सिर्फ़ डीओएम में नेस्ट किया गया नहीं है. पैतृक पॉपओवर की परिभाषा यह है:
  • DOM पोज़िशन (चाइल्ड) से संबंधित.
  • चाइल्ड एलिमेंट, जैसे कि popovertoggletarget, popovershowtarget वगैरह पर एट्रिब्यूट को ट्रिगर करने से संबंधित होते हैं.
  • जो anchor एट्रिब्यूट से जुड़ी होती है (सीएसएस ऐंकरिंग एपीआई डेवलपमेंट में है).
• लाइट खारिज करें.
• खोलने पर, ऐसे अन्य पॉपओवर खारिज हो जाते हैं जो पुराने पॉपओवर नहीं हैं. नीचे दिए गए डेमो में यह जानकारी पाएं कि पुश्तैनी पॉपओवर की मदद से नेस्टिंग कैसे काम करती है. देखें कि कुछ 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 की ज़रूरत होगी. क्लिक करने पर, हम पॉपओवर छिपा रहे हैं, ऑडियो चला रहे हैं, और फिर उसे दोबारा दिखा रहे हैं.

सुलभता

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

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

आपको "फ़ुल स्क्रीन वाला वर्शन" खोलना होगा देखें कि यह कैसे काम करता है.

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

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

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

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

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

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

मार्गदर्शक ड्रॉवर

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

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

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

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

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

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

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

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

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

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

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

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

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

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

टाइम्ड पॉपओवर

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

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

स्क्रीन सेवर

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

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

कैरेट फ़ॉलो

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

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

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

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

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

हो गया!

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

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

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

Unस्प्लैश पर मैडिसन ऑरेन की फ़ोटो