🌩️ 😜 🏷️ एक बार फिर मोडल खिड़कियों और कुछ अच्छाइयों के बारे में 👏🏼 👈🏿 ✉️

संभवतः टोंड साहित्य पहले से ही मोडल विंडो के बारे में लिखा गया है, लेकिन हब पर यह लेख मुझे इस विषय को लिखने के लिए प्रेरित कर रहा था। यह पृष्ठ और मोडल विंडो दोनों में क्षैतिज छलांग सहित बहुत सारे अप्रयुक्त छोड़ दिया।
बेशक, कोई भी टिप्पणी में सदस्यता समाप्त कर सकता है, कह सकता है, ऐसा-तो-और, और सब कुछ टिप-टॉप होगा। लेकिन मेरी टिप्पणी स्पष्ट उदाहरणों और टिप्पणियों के साथ एक नए लेख के आकार तक बढ़ गई है।
किसके लिए यह दिलचस्प हो गया - हैबरात के तहत स्वागत!

मैं स्पष्ट रूप से कहूंगा कि किसी पृष्ठ पर इस प्रकार की देखने की सामग्री को "मोडल विंडो" कहा जाता है, मेरी भाषा चालू नहीं होती है। फिर भी, ये थोड़ी अलग चीजें हैं। इसलिए, मैं इसे "क्लाउड सामग्री" कहूंगा। मुझे लगता है कि इस प्रकार की सामग्री प्रदर्शन के लिए यह सबसे सही परिभाषा है।

तो, हमारे मुख्य कार्य:
1) पृष्ठ को ठीक करने का प्रबंधन करें ताकि इसकी ऊंचाई में गर्म परिवर्तन के साथ, यह बाएं और दाएं "कूद" न जाए।
2) एक क्लाउड विंडो खोलें और इसे केंद्र में रखें ताकि इसकी ऊंचाई बदलते समय भी, पृष्ठ पर सामग्री यथावत बनी रहे।
3) कीबोर्ड पर "ऊपर और नीचे तीर" की कुंजी का उपयोग करके "क्लाउड विंडो" की ऊर्ध्वाधर स्क्रॉलिंग प्राप्त करें।
4) कैश ने पहले डोम में खिड़कियां खोली थीं, ताकि जटिल ऑपरेशन और गणना न कर सकें या सर्वर से अनावश्यक अनुरोध न कर सकें।
5) अंत उपयोगकर्ता के लिए सबसे सुविधाजनक नेविगेशन के लिए हॉट नेविगेशन कुंजियों को कनेक्ट करें (तीर कुंजी वाम / दाएं खिड़कियों के बीच चलने के लिए और खिड़की बंद करने के लिए एस्केप कुंजी)।

अंक 4 और 5 बन्स होंगे।

बाकी सब चीजों के लिए, हम किसी भी ढांचे का उपयोग नहीं करेंगे, और हम मूल जेएस में लिखेंगे। आगे देखते हुए, मेरा कहना है कि बिना किसी असम्पीडित रूप के टिप्पणियों के जेएस कोड में केवल 5 kb लगते हैं।

चलिए शुरू करते हैं।
मैं तुरंत आपको एक तैयार दृश्य उदाहरण दिखाऊंगा ताकि इस लेख को पढ़ते समय आपके पास तुलना करने के लिए कुछ हो और देखें कि वास्तव में क्या चर्चा हो रही है।

DEMO EXAMPLE और पेज से जुड़ी एक JS फाइल (JS "पीटा जा सकता है", ताकि आप तुरंत पूरे संग्रह को डाउनलोड कर सकें)।

सबसे पहले, हम फ़ंक्शन एलएमआईडी () को परिभाषित करते हैं; चूंकि डॉक्यूमेंट में। यह बड़ी मात्रा में कोड वाली बड़ी फ़ाइलों के लिए विशेष रूप से महत्वपूर्ण है।

function elemID(e) {return document.getElementById(e);};

हम एक वस्तु शुरू करते हैं जिसके साथ हम बाद में काम करेंगे:

 var Content = {}

पहली चीज़ जो हम शुरू करेंगे, वह है पृष्ठ को ठीक करना। ऐसा करने के लिए, हम id = "लेयर" वाले पेज की पूरी सामग्री को एक ब्लॉक में लपेटते हैं।

 <body id="body"> <div class="layer" id="layer"> <!--     --> </div> </body>

हो गया। अब उसके लिए हम एक विधि लिखते हैं जो इस ब्लॉक को केंद्र में रखती है:

 editSiteLayer:function (content) { /**    ,    - "layer" **/ if (!content) {var content = 'layer';} /** **     **   18px -     **/ var inWidth = window.innerWidth-18, /**    **/ layerWidth = elemID(content).clientWidth; /**        undefined **/ if (inWidth && layerWidth) { /**      CSS  float:left **/ elemID(content).style.cssFloat = 'left'; /** **           -    **            **/ elemID(content).style.marginLeft = (inWidth/2)-(layerWidth/2)+'px'; } }

हमने लिखा और अस्थायी रूप से इसके बारे में भूल गए (अंत में हम निश्चित रूप से इसे जोड़ेंगे)।

हमारा दूसरा काम "क्लाउड विंडो" बनाना और खोलना है।
हम इस तरह से क्लाउड विंडो खोलेंगे:

 <body id="body"> <div class="cloud" id="cloud"> <div class="cloud-layer" id="cloud-layer"> <em class="cloud-contaner" id="cloudpage__ID_"> </em> </div> </div> </body>

"क्लाउड" ब्लॉक एक तरह के सुरक्षात्मक मास्क के रूप में कार्य करता है और साइट सामग्री को क्लाउड विंडो से अलग करता है, जबकि इसे "क्लाउड" बनाता है। इसके सीएसएस गुण:

 .cloud{ display:block; padding:0; margin:0; position:fixed; top:0; left:0; right:0; bottom:0; background: rgba(0, 0, 0, 0.795); z-index:3; overflow:auto; }

क्लाउड सामग्री वाले सभी DOM तत्वों के लिए "क्लाउड-लेयर" ब्लॉक "पैरेंट" है। यह पृष्ठ के केंद्र में तय किया गया है और यह संपत्ति की स्थिति पर सेट है: रिश्तेदार; (यह वह है जो आपको कीबोर्ड कीज़ के साथ विंडो को स्क्रॉल करने की अनुमति देता है)।
इसके सीएसएस गुण:

 .cloud .cloud-layer{ position:relative; float:left; width:720px; margin:0; padding:0; z-index:4; }

"क्लाउड-कंटनेर" ब्लॉक हमारे क्लाउड कंटेंट के लिए कंटेनर है। EM टैग में वास्तव में क्यों? इसके बाद, हम मौजूदा ब्लॉक की खोज में और सभी मौजूदा लोगों को छिपाने के लिए DOM के ऊपर जाएंगे। टैग द्वारा खोज हमें बहुत अच्छी लगती है।

वास्तविक समस्या को समझने के लिए - कल्पना करें कि हम अपनी साइट पर सभी उपयोगकर्ता की व्यक्तिगत तस्वीरें देखना चाहते हैं। आमतौर पर यह किया जाता है: पहली बार जब आप किसी फोटो पर क्लिक करते हैं, तो सर्वर से सभी फोटो, उनकी विशिष्ट आईडी, विवरण और अन्य जानकारी प्राप्त करने के लिए http अनुरोध किया जाता है।
एक उदाहरण के लिए, मैं ऐसा नहीं करूंगा, लेकिन अग्रिम में मैंने इस सरणी को अपने हाथों से पंजीकृत किया और इसे काम के लिए तैयार किया:

 var photoInfo = []; photoInfo[0] = {'id':5478,'name':'  №1','desc':'  №1','link':'1347690631.jpg'}; photoInfo[1] = {'id':4198,'name':'  №2','desc':'  №2','link':'1347691505.jpg'}; photoInfo[2] = {'id':7596,'name':'  №3','desc':'  №3','link':'1347691550.jpg'}; photoInfo[3] = {'id':98637,'name':'  №4','desc':'  №4','link':'1347691521.jpg'};

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

 /** *  cloudNav()     cloudShow() *         **/ _cloudNav:function (gid) { if (photoInfo) { var num, prev, next, info, len = photoInfo.length; if (len > 0) { for(var i=0; i<len; i++) { if (photoInfo[i].id == gid) { current = i; info = photoInfo[i]; if (len > 1 && (len-1) > i) {next = photoInfo[i+1].id;} if (len > 1 && i > 0) {prev = photoInfo[i-1].id;} num = i+1; } } } return {"len":len,"num":num,"prev":prev,"current":gid,"next":next,"info":info}; } }, /** *  cloudShow()   ,      * gid -      **/ cloudShow:function (gid) { /**   ,     **/ var arrNav = Content._cloudNav(gid); if (arrNav && arrNav.info) { /**       **/ if (arrNav.prev !== undefined) {ContentPointPrev = arrNav.prev;} else {ContentPointPrev = null;} if (arrNav.next !== undefined) {ContentPointNext = arrNav.next;} else {ContentPointNext = null;} /**   ,          -,    **/ if (elemID('body').style.overflowY != 'hidden') { elemID('body').style.overflowX = 'hidden'; elemID('body').style.overflowY = 'hidden'; } /**        -    **/ if (!elemID('cloud')) { /**      "cloud" **/ var box = document.createElement('div'); box.className = 'cloud'; box.id = 'cloud'; elemID('body').appendChild(box); /**    "cloud" -    **/ var cloudbox = document.createElement('div'); cloudbox.className = 'cloud-layer'; cloudbox.id = 'cloud-layer'; elemID('cloud').appendChild(cloudbox); /**    "cloud"     // **/ var navbox = document.createElement('div'); navbox.id = 'cloud-nav'; elemID('cloud').appendChild(navbox); /**       **/ Content.editSiteLayer('cloud-layer'); /**    -        EM    **/ } else { var ems = elemID('cloud').getElementsByTagName('EM') if (ems.length > 0) { for(var i=0; i<ems.length; i++) { ems[i].style.display = 'none'; } } } /**    **/ elemID('cloud-nav').innerHTML = ''; /**        -    **/ if (!elemID('cloudpage_'+gid)) { var contentbox = document.createElement('em'); contentbox.className = 'cloud-contaner'; contentbox.id = 'cloudpage_'+gid; elemID('cloud-layer').appendChild(contentbox); var html = '<div class="cloud-title">'+ '<div class="cloud-name">'+ ' '+arrNav.num+'  '+arrNav.len+ '</div>'+ '<div class="cloud-close" onclick="return Content.cloudClose();"> </div>'+ '</div>'+ '<div class="cloud-body">'+ '<p><img onclick="'+(arrNav.next !== undefined ? 'return Content.cloudShow('+arrNav.next+')' : 'return Content.cloudClose();')+'" src="images/'+arrNav.info.link+'" alt="" /></p>'+ '<div class="more-button" onclick="Content.Slide(this, {point:\'next\', hide:\'   \', show:\'   \'})">'+ '   '+ '</div>'+ '<span style="display:none;">'+ '<p>'+arrNav.info.name+'</p>'+ '<p>'+arrNav.info.desc+'</p>'+ '<p>'+lorem[0]+'</p>'+ '<p>'+lorem[1]+'</p>'+ '<p>'+lorem[0]+'</p>'+ '<p>'+lorem[1]+'</p>'+ '<p>'+lorem[0]+'</p>'+ '<p>'+lorem[1]+'</p>'+ '</span>'+ '</div>'; elemID('cloudpage_'+gid).innerHTML = html; /**        **/ } else { elemID('cloudpage_'+gid).style.display = 'block'; } /**    **/ var navi = '<div class="cloudnavclose" onclick="return Content.cloudClose();"></div>'; if (arrNav.prev !== undefined) {navi+= '<div onclick="return Content.cloudShow('+arrNav.prev+')" class="cloudnavprev"></div>';} if (arrNav.next !== undefined) {navi+= '<div onclick="return Content.cloudShow('+arrNav.next+')" class="cloudnavnext"></div>';} elemID('cloud-nav').innerHTML = navi; /**  ,    **/ ContentShow = true; /**     **/ elemID('cloud').style.display = 'block'; } },

ऊपर, मैंने "लॉरेम" सरणी के कुछ मूल्यों का उपयोग किया था - इसमें मैंने पहले से पृष्ठ को नेत्रहीन रूप से लंबा करने के लिए एक लंबा पाठ तैयार किया ताकि यह दिखाया जा सके कि खिड़की तय हो गई है।

जब खिड़की खोली जाती है, तो Content.editSiteLayer ('क्लाउड-लेयर') विधि लॉक हो जाती है; - पहले वर्णित विधि से, हम पृष्ठ के केंद्र में क्लाउड विंडो को केंद्र में रखते हैं, बिना स्क्रॉल किए प्रकट होने पर इसे बाएं और दाएं कूदने के लिए दफन करते हैं।

विंडो बंद करते समय, Content.cloudClose () विधि का उपयोग किया जाता है; यहाँ यह है:

 /**  cloudClose()    **/ cloudClose:function () { /**      **/ elemID('cloud').style.display = 'none'; /**        **/ elemID('body').style.overflowX = 'auto'; elemID('body').style.overflowY = 'auto'; /**      **/ ContentShow = null; }

और हमारा अंतिम कार्य गर्म कुंजियों को जोड़ना है। ऐसा करने के लिए, हम Content.init () विधि का निर्माण करेंगे, जो हॉट कीज़ को प्रोसेस करेगा और जब पेज लोड होगा, तो तुरंत इसे ब्राउज़र विंडो में केंद्रित करें (जो मैंने लेख के बहुत शुरुआत में लिखा था):

 /** *  init()         **/ init:function () { /**      **/ Content.editSiteLayer('layer'); /**      **/ window.onresize = function() { /**      **/ Content.editSiteLayer('layer'); /**   ,    **/ if (ContentShow) { Content.editSiteLayer('cloud-layer'); } }; /**      **/ window.onkeydown = function(event) { /**     **/ if (ContentShow) { /**   **/ event = event || window.event; switch(event.keyCode) { case 27: //  "Escape" Content.cloudClose(); break; case 37: //  " " (    ID   ) if (ContentPointPrev !== null){Content.cloudShow(ContentPointPrev);} break; case 39: //  " " (    ID   ) if (ContentPointNext !== null){Content.cloudShow(ContentPointNext);} break; } } }; }

यह विधि <BODY> टैग को बंद करने से पहले पृष्ठ के अंत में लिखी जानी चाहिए:

 <script type="text/javascript" language="javascript">Content.init();</script>

कुछ पूछेंगे कि ऐसा क्यों है, और आप इसे फ़ॉर्म में बॉडी टैग पर क्यों नहीं डाल सकते हैं
<BodY onload = "Content.init ();"> या तो zayuzat निर्माण विंडो .onload () लेकिन इस मामले में, हमारी वस्तु तब तक काम करना शुरू नहीं करेगी जब तक कि पूरे पृष्ठ को अंत तक लोड नहीं किया जाता है। यदि आपके पास पृष्ठ पर बहुत सारे विज्ञापन हैं, तो यह सब अधिक अप्रिय है। और 9px तक बाईं ओर एक तेज छलांग लगाते समय यह थोड़ा कष्टप्रद होगा।

सामान्य तौर पर, हमने मुख्य कार्यों का सामना किया। एक बार फिर DEMO EXAMPLE ।

ओपेरा 12.00, क्रोम 21 और उच्चतर, IE 8 और 9, सफारी 5.0 और Yandex.browser 1.0 ब्राउज़रों में परीक्षण किया गया
दुर्भाग्य से, फ़ायरफ़ॉक्स में परीक्षण करने का कोई तरीका नहीं है।

लेख को अंत तक पढ़ने के लिए धन्यवाद।
आप इस संग्रह में डेमो उदाहरण से सभी सीएसएस, जावास्क्रिप्ट फ़ाइलें और एचटीएमएल डाउनलोड कर सकते हैं।
संग्रह में 2 JS फ़ाइलें हैं:
page.js - विस्तृत टिप्पणियों के साथ फ़ाइल
js.js - एक ही फ़ाइल, लेकिन कोई टिप्पणी नहीं

मुझे आपके सभी सवालों के जवाब देने में खुशी होगी, साथ ही किसी भी आलोचना को सुनना पड़ेगा।

एक बार फिर मोडल खिड़कियों और कुछ अच्छाइयों के बारे में

More articles: