पॉपओवर एपीआई को बेसलाइन में दिखाया गया है

Una Kravets

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

पॉपओवर की सुविधाओं के बारे में कुछ खास बातें:

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

पॉपओवर बनाना

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

• सबसे पहले, उस एलिमेंट पर popover एट्रिब्यूट सेट करें जो पॉपओवर होगा.
• इसके बाद, पॉपओवर एलिमेंट में यूनीक id जोड़ें.
• आखिर में, बटन को पॉपओवर से कनेक्ट करने के लिए, बटन के popovertarget को पॉपओवर एलिमेंट के id की वैल्यू पर सेट करें.

यह इस कोड में दिखाया गया है:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

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

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

पॉपओवर बनाम मोडल डायलॉग

आप सोच रहे होंगे कि डायलॉग के मौजूद होने पर आपको पॉपओवर की ज़रूरत होगी या नहीं, और इसका जवाब है: शायद आपको न मिले.

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

निष्कर्ष और आगे का पढ़ने के लिए

इस प्लैटफ़ॉर्म पर popover की कई दिलचस्प सुविधाएं हैं. इस एपीआई के बारे में ज़्यादा जानने के साथ-साथ, इस सुविधा के ऐक्सेस और सेट से जुड़े दस्तावेज़ के बारे में ज़्यादा जानने के लिए, यहां कुछ जानकारी दी गई है:

• सिमैंटिक्स और पॉपओवर एट्रिब्यूट: कब इस्तेमाल करें? हिड्डे डी रीज़
• पॉपओवर की सुलभता पर: ब्राउज़र, Hidde de Vries के ज़रिए क्या करता है और क्या नहीं
• पॉपओवर के लिए एमडीएन दस्तावेज़