समय आ गया है! मैं जिस सुविधा को लेकर सबसे ज़्यादा उत्साहित हूं उसमें से एक सुविधा सभी मॉडर्न ब्राउज़र पर उपलब्ध है. यह आधिकारिक तौर पर बेसलाइन 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>
पॉपओवर बनाम मोडल डायलॉग
आप सोच रहे होंगे कि क्या डायलॉग मौजूद होने पर आपको पॉपओवर की ज़रूरत होगी और इसका जवाब है: शायद आप न हों.
ध्यान दें कि पॉपओवर एट्रिब्यूट में, खुद से कोई सिमेंटिक्स नहीं दिया जाता है. अब पॉपओवर का इस्तेमाल करके, मॉडल डायलॉग जैसे अनुभव बनाए जा सकते हैं. हालांकि, इन दोनों के बीच कुछ मुख्य अंतर हैं:
मॉडल <dialog> एलिमेंट
dialog.showModal()से खोला गया.dialog.close()के साथ बंद.- बाकी पेज को बंद कर देता है.
- ऐप्लिकेशन में, रोशनी को खारिज करने की सुविधा काम नहीं करती.
[open]एट्रिब्यूट का इस्तेमाल करके, ओपन स्टेट को स्टाइल किया जा सकता है.- यह एक इंटरैक्टिव कॉम्पोनेंट है, जो बाकी पेज के साथ इंटरैक्शन को ब्लॉक करता है.
[popover] एट्रिब्यूट
- इसे डिक्लेरेटिव इनवॉइसर (
popovertarget) की मदद से खोला जा सकता है. popovertarget(ऑटो पॉपओवर) याpopovertargetaction=hide(मैन्युअल पॉपओवर) के साथ बंद.- इससे, पेज का बाकी हिस्सा बंद नहीं होता.
- लाइट खारिज करने के तरीके का इस्तेमाल किया जा सकता है.
:popover-openस्यूडो-क्लास के साथ, ओपन स्टेट को स्टाइल किया जा सकता है.- कोई मतलब नहीं होता.
निष्कर्ष और आगे की रीडिंग
popover के प्लैटफ़ॉर्म में कई शानदार सुविधाएं हैं. अगर आपको इस एपीआई के बारे में ज़्यादा जानना है. इसमें, सुविधा के बारे में सुलभता सुविधाओं के बारे में ज़्यादा जानकारी, और सुविधा के सेट से जुड़े दस्तावेज़ शामिल हैं. ज़्यादा जानकारी के लिए यहां कुछ लेख दिए गए हैं: