सबसे ऊपर वाली लेयर, ब्राउज़र के व्यूपोर्ट में इससे मिलते-जुलते document के ऊपर मौजूद होती है. साथ ही, हर document के पास इससे जुड़ी एक टॉप लेयर होती है. इसका मतलब है कि टॉप लेयर में प्रमोट किए गए एलिमेंट को z-index या DOM हैरारकी के बारे में चिंता करने की ज़रूरत नहीं है. इन्हें खेलने के लिए, एक शानदार ::backdrop सूडो एलिमेंट भी मिलता है. Fullscreen API की खास बातें ज़्यादा जानकारी देती हैं, क्योंकि dialog सहायता लागू होने से पहले, Fullscreen, इस्तेमाल की जा रही सबसे ऊपरी लेयर का अच्छा उदाहरण है.
सबसे ऊपर वाली लेयर, कॉन्टेंट को document के बाकी हिस्से के ऊपर रेंडर करने में होने वाली समस्या को हल करने में मदद करती है.
ध्यान रखने वाली ज़रूरी बातें:
- टॉप लेयर, document फ़्लो से बाहर है.
- z-index का टॉप लेयर में कोई इफ़ेक्ट नहीं होता.
- सबसे ऊपर की लेयर के हर एलिमेंट में, स्टाइल किया जा सकने वाला ::backdrop स्यूडो एलिमेंट होता है.
- हर एलिमेंट और ::backdrop एक नया स्टैकिंग कॉन्टेक्स्ट जनरेट करते हैं.
- ऊपरी लेयर में मौजूद एलिमेंट उसी क्रम में स्टैक किए जाते हैं जिस क्रम में वे सेट में दिखते हैं. इसमें सबसे आखिर में जो दिखता है वह सबसे ऊपर दिखता है. अगर आपको किसी एलिमेंट का प्रमोशन करना है, तो उसे हटाएं और फिर से जोड़ें.
अब तक हमने टॉप लेयर की नकल कैसे की? वैसे, डेवलपर को body के आखिर में कंटेनर के किसी खाली एलिमेंट को छोड़कर जाना आम बात है. इसके बाद, इसका इस्तेमाल "गलत" टॉप लेयर के तौर पर किया जाएगा. कोशिश यह है कि इस कंटेनर को स्टैक में मौजूद बाकी चीज़ों के ऊपर रखा जाए. जब आपको किसी चीज़ का प्रमोशन करके, उसे बाकी सब चीज़ों से ऊपर रखना होता है, तब आपको उसे उस कंटेनर में जोड़ना होता है. इसे हम SweetAlert, reactjs-popup, Magnific Popup जैसे लोकप्रिय पैकेज में देख सकते हैं.
<dialog> और "पॉपओवर" जैसे नए बिल्ट-इन कॉम्पोनेंट और एपीआई का इस्तेमाल करने पर, आपको इस समस्या को ठीक करने के लिए किसी समाधान की ज़रूरत नहीं पड़ेगी. सबसे ऊपर वाले लेयर पर, कॉन्टेंट का प्रमोशन किया जा सकता है.
यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क की मदद से, प्रमोट किए गए एलिमेंट को उनके कॉम्पोनेंट मिलते-जुलते हिस्सों के साथ ढूंढा जा सकता है. हालांकि, रेंडरिंग के समय वे अक्सर डीओएम में अलग हो जाते हैं.
ऊपरी लेयर का इस्तेमाल करके, प्रमोट किए गए एलिमेंट वे जगह होते हैं जहां उन्हें अपने सोर्स कोड (उदाहरण के लिए, <dialog>) में रखा जाता है. इससे कोई फ़र्क़ नहीं पड़ता कि एलिमेंट, DOM में कितनी लेयर हैं. उसे टॉप लेयर में प्रमोट किया जाएगा. साथ ही, उसे कॉम्पोनेंट एचटीएमएल के साथ अपनी जगह पर देखा जा सकता है. इससे डीओएम में, ट्रिगर एलिमेंट और प्रमोट किए गए एलिमेंट, दोनों की एक साथ जांच करना आसान हो जाता है. यह खास तौर पर तब काम आता है, जब आपका ट्रिगर एलिमेंट, एट्रिब्यूट को अपडेट कर रहा हो. उदाहरण के लिए, एलिमेंट का एक साथ मौजूद होने की वजह से, अब सुलभता सुविधाओं का एक और फ़ायदा यह है.
ऊपरी लेयर बनाम उच्च z-index को दिखाने के लिए, यह डेमो देखें.
इस डेमो में, एक SweetAlert पॉप-अप खोला जा सकता है. साथ ही, टॉप लेयर <dialog> को भी खोला जा सकता है. <dialog> खोलें और फिर SweetAlert पॉप-अप खोलकर देखें. आप देखेंगे कि यह हमारे टॉप लेयर एलिमेंट के नीचे दिखता है. साथ ही, हमारे SweetAlert पॉप-अप की शुरुआत position: fixed के साथ 10,000 में से z-index का इस्तेमाल कर रही है.
.swal-overlay {
z-index: 10000;
position: fixed;
}
<dialog> को दूसरे सभी कॉन्टेंट के ऊपर दिखाने के लिए, आपको उस पर कोई स्टाइल लागू करने की ज़रूरत नहीं है.
DevTools
इससे हमें DevTools सहायता मिली. Chrome DevTools, टॉप लेयर एलिमेंट के साथ काम करने की सुविधा जोड़ रहा है, ताकि आप टॉप लेयर की जांच कर सकें. इससे, टॉप लेयर या टॉप लेयर में मौजूद चीज़ों को डीबग और विज़ुअलाइज़ करना आसान हो जाता है.
अलीना वर्क्की के पास एक मज़ेदार लेख है, जिसमें इन टूल का इस्तेमाल करने के बारे में विस्तार से बताया गया है. फ़िलहाल, यह सुविधा Chrome कैनरी के वर्शन 105 में झलक दिखाने के लिए उपलब्ध है.
बस इतना ही!
ऊपरी लेयर के बारे में कम शब्दों में जानकारी. इन कामों के लिए "अलविदा!" कहना:
.popup-container {
z-index: 10000;
}
टॉप लेयर में क्या शामिल करना चाहिए? क्या आपने dialog आज़माया है? या OpenUI पॉपओवर एपीआई का इस्तेमाल करें? हमें बताएं!