🏢 🥈 🖖🏿 मोडल विंडो जो हम हकदार हैं 🆚 ✌🏼 🧘🏿

चलिए शुरू करते हैं

विभिन्न मानदंडों और गुणवत्ता मेनिफेस्टों में एक ऐसा आइटम होता है, जो एक मोडल विंडो के खुलने पर पेज स्क्रॉलिंग को ब्लॉक करता है। एक मोडल विंडो से तात्पर्य केवल उसके साथ बातचीत से है।

कई लोग सवाल पूछेंगे: "क्यों नहीं तैयार किए गए समाधानों का उपयोग करें?" समस्या यह है कि यह कार्यक्षमता या तो बिल्कुल लागू नहीं होती है, या बहुत खराब तरीके से की जाती है। आप सबसे सरल और सबसे खराब समाधान का उपयोग कर सकते हैं:

.body { overflow: hidden;}

यहां हमें पेज की एक हल्की-फुल्की झलक मिलती है। कोड । यह ध्यान देने योग्य है: समस्या केवल उसी जगह होती है जहां पृष्ठ पर स्क्रॉल होता है, उदाहरण के लिए, सफारी में ऐसी कोई समस्या नहीं है।

एनीमेशन समस्या (Gif)

एनपीएम ओपन स्पेस में कुछ समाधान स्क्रॉल को एक इंडेंट या ब्लॉक के साथ बदलते हैं जो एक स्क्रॉल (एक साधारण ग्रे बार) के रूप में स्टाइल करते हैं, बहुत सारे जादू की पेशकश करते हैं, लेकिन वे समस्या को ठीक नहीं करते हैं।

हम आरंभिक कोड को थोड़ा बदल देंगे और सब कुछ काम करेंगे:

 .body { position:fixed; overflow-y: scroll; }

अब एक और समस्या सामने आई है: पृष्ठ कूदता है। कोड । Js के माध्यम से समाधान सरल है: पृष्ठ को खोलते समय, हम उस मान को लेते हैं जो पृष्ठ को स्क्रॉल किया जाता है और इस मान को <body> कोड टैग की शीर्ष संपत्ति पर सेट करता है।

 function getBodyScrollTop() { return self.pageYOffset || (document.documentElement && document.documentElement.ScrollTop) || (document.body && document.body.scrollTop); } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() //    body.style.top = `-${body.dataset.scrollY}px` modal.classList.add('modal--open') body.classList.add('body-lock') }) closeModalButton.addEventListener('click', e => { e.preventDefault() modal.classList.remove('modal--open') body.classList.remove('body-lock') window.scrollTo(0, body.dataset.scrollY) //  ,   })

कभी-कभी साइट पर एक ऐसा पृष्ठ हो सकता है जिसमें बहुत कम सामग्री हो और कोई स्क्रॉल न हो, लेकिन जब आप एक मोडल विंडो खोलते हैं, तो हमारा कोड इसे जोड़ता है। स्क्रॉल को थोड़ा संशोधित करते हैं। तैयार घोल ।

 function existVerticalScroll() { return document.body.offsetHeight > window.innerHeight } openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() modal.classList.add('modal--open') if(existVerticalScroll()) { //   body.classList.add('body-lock') body.style.top = `-${body.dataset.scrollY}px` } }) closeModalButton.addEventListener('click', e => { e.preventDefault() modal.classList.remove('modal--open') if(existVerticalScroll()) { //   body.classList.remove('body-lock') window.scrollTo(0,body.dataset.scrollY) } })

उपलब्धता

यदि आप इसके बारे में नहीं सोचते हैं, तो मोडल विंडो के बाहर एक टैब का उपयोग करके एक संभावित आंदोलन होगा। Gif पर, बस टैब को कुछ बार हिट करें।

एनीमेशन समस्या (Gif)

इंटरनेट पर, इस समस्या का कोई सरल समाधान नहीं है, और फोकस-ट्रैप.जेएस लाइब्रेरी होने पर अपनी ~~बैसाखी~~ बाइक लिखना बहुत तर्कसंगत नहीं है। यहाँ, लेखक ने पुस्तकालयों और उनकी समस्याओं के विषय में अधिक विस्तार से बताया ।

 //     const modalFocusTrap = createFocusTrap(".modal"); //      openModalButton.addEventListener('click', e => { e.preventDefault() body.dataset.scrollY = getBodyScrollTop() modal.classList.add('modal--open') modalFocusTrap.activate(); //  .   if(existVerticalScroll()) { body.classList.add('body-lock') body.style.top = `-${body.dataset.scrollY}px` } }) closeModalButton.addEventListener('click', e => { e.preventDefault() modal.classList.remove('modal--open') modalFocusTrap.deactivate(); //  .   if(existVerticalScroll()) { body.classList.remove('body-lock') window.scrollTo(0,body.dataset.scrollY) } })

परिणाम

यहां तक कि अगर पृष्ठ पर कई मोडल विंडो हैं, तो आप एक फ़ंक्शन में सभी कोड को लपेट सकते हैं और मोडल विंडो का वर्ग नाम पास कर सकते हैं।

 function initModal(className) { // ,        } initModal('modalName1') initModal('modalName2')

पहली नज़र में समस्या सरल है, लेकिन बहुत सारे स्पष्ट क्षण हैं। मुझे लगता है कि यह लेख आपको बेहतर मोडल विंडो बनाने में मदद करेगा। तैयार कोड

मोडल विंडो जो हम हकदार हैं

चलिए शुरू करते हैं

उपलब्धता

परिणाम

उपयोगी सामग्री

More articles: