सीएसएस मोडल विंडो

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



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

पॉपअप HTML कोड में आमतौर पर यह संरचना होती है:

<div class ="popup__overlay"></div> <! -- --> <br/><div class ="popup">...</div> <! -- --> <br/>

और सीएसएस ( यहां और नीचे मैं जानबूझकर केवल कुछ ब्राउज़रों और उनके संस्करणों के लिए आवश्यक कुछ संपत्तियों की वर्तनी को छोड़ दूंगा, केवल सबसे मूल को छोड़कर ):

.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> background : #000 ;<br/> opacity : . 5 ;<br/> filter : alpha( opacity=50 );<br/> z-index : 999 <br/> }<br/> .popup {<br/> position : absolute ;<br/> width : 20% ;<br/> z-index : 1000 ;<br/> border : 1px solid #ccc ;<br/> background : #fff<br/> } <br/>

जेएस ब्राउज़र और ब्राउज़र संस्करण का निर्धारण करता है, और इसके आधार पर कार्यक्षेत्र के आकार और पॉपअप के आकार (यदि वे सेट नहीं हैं) की गणना करते हैं, और फिर कुछ सरल गणना इसके ऊपरी बाएं कोने की स्थिति से बने होते हैं (बाएं और शीर्ष के शीर्ष-गुण।। पॉपअप)। कई प्लगइन्स भी पृष्ठ का आकार बदलने का जवाब देते हैं, हर बार पूरी बात को दोहराते हैं ताकि पॉपअप कार्यक्षेत्र के केंद्र में बिल्कुल स्थित हो।

मैं स्वभाव से एक पूर्णतावादी हूं (मुझे कभी-कभी यह बुरा लगता है), और अक्सर छोटे विवरणों से भी परेशान होते हैं, इन विवरणों में अधिकतम संभव विस्तार को बेहतर बनाने और जोड़ने की कोशिश करते हैं, और मैं इन सभी प्लगइन्स के काम में इस क्षण को पकड़ने में विफल नहीं हो सकता। एक विचार था कि एक पॉप-अप की स्थिति के सभी काम को जेएस के कंधों से ब्राउज़र के कंधों पर स्थानांतरित किया जा सकता है, अर्थात्, सीएसएस का उपयोग करके इस काम को करने के लिए।

यही हम करेंगे।

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

इसलिए, हमारे पास एक बटन के साथ एक पृष्ठ है, जब क्लिक किया जाता है, तो कुछ जानकारी के साथ एक मोडल विंडो पॉप अप होनी चाहिए, और अन्य सभी सामग्री को ओवरले द्वारा अस्पष्ट किया जाना चाहिए।

शुरुआत के लिए, एचटीएमएल। इसकी संरचना ऊपर बताए गए कोड से थोड़ी अलग होगी, क्यों - लेख में बाद में उस पर और अधिक; तत्व वर्ग समान रहेंगे:

< div class ="popup__overlay"> <br/> < div class ="popup"></ div > <br/> </ div > <br/>

और कुछ सीएसएस:

.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> width : 100% ;<br/> height : 100% ;<br/> z-index : 999 <br/> }<br/> .popup {<br/> } <br/>

निश्चित आकार

सबसे आसान विकल्प। कुछ भी नया आविष्कार करने की आवश्यकता नहीं है:

.popup {<br/> left : 50% ;<br/> top : 50% ;<br/> width : 400px ;<br/> height : 200px ;<br/> margin-left : -200px ;<br/> margin-top : -100px <br/> } <br/>

आधी चौड़ाई और ऊंचाई में ऋणात्मक मार्जिन सामान्य और उबाऊ हैं, इस बारे में कुछ भी मूल नहीं है। चलिए आगे बढ़ते हैं।

पॉपअप आकार सामग्री से भिन्न होता है

पहला - क्षैतिज संरेखण - यह आसान प्रतीत होता है। यदि पॉपअप एक निश्चित चौड़ाई का है, तो निम्नलिखित पर्याप्त होगा:

.popup {<br/> margin : auto <br/> } <br/>

यह किसी भी तरह से ऊर्ध्वाधर संरेखण को प्रभावित नहीं करेगा, और, वैसे, यदि क्षैतिज संरेखण आपके लिए पर्याप्त है, तो आप पॉपअप के कुछ अन्य ऊपरी संकेत का संकेत देकर वहां रुक सकते हैं। लेकिन यह हमारे लिए पर्याप्त नहीं है! चलिए आगे बढ़ते हैं।

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

इसलिए, मार्जिन पहले से ही दूर हो रहा है - हम आकारों को नहीं जानते हैं। हम याद करते हैं कि समान प्रभाव वाले गुणों का क्या है। हाँ, पाठ-संरेखित करें। लेकिन केवल इनलाइन तत्वों के लिए। ठीक है। ऐसा लगता है कि भगवान ने स्वयं प्रदर्शन के उपयोग का आदेश दिया था: इनलाइन-ब्लॉक - एक ब्लॉक तत्व जिसमें इनलाइन तत्वों के लिए गुण लागू किए जा सकते थे। इस संपत्ति के समर्थन के साथ, सभी ब्राउज़रों को भी क्रम में कहा जा सकता है। कोड कुछ इस तरह बनता है:

.popup__overlay {<br/> position : fixed ;<br/> left : 0 ;<br/> top : 0 ;<br/> width : 100% ;<br/> height : 100% ;<br/> z-index : 999 ;<br/> text-align : center <br/> }<br/> .popup {<br/> display : inline - block ;<br/> vertical-align : middle <br/> } <br/>

ऊर्ध्वाधर संरेखण रहता है - ऊर्ध्वाधर-संरेखण हमारे लिए उपयुक्त है। किसी भी अन्य स्थिति में, लाइन-ऊंचाई का उपयोग करना भी उचित होगा, लेकिन चूंकि हमारे पास एक निश्चित पृष्ठ ऊंचाई (इस संदर्भ में लाइन-ऊंचाई) नहीं है, इसलिए इसका उपयोग यहां नहीं किया जा सकता है। एक चाल अज्ञात आकारों के तत्वों के ऊर्ध्वाधर संरेखण के साथ बचाव के लिए आती है। मुझे ठीक से याद है कि मुझे यह तरीका हैबे पर मिला, लेकिन, दुर्भाग्यवश, उस विषय का लिंक नहीं मिला। इस विधि में निम्नलिखित शामिल हैं: शून्य चौड़ाई और माता-पिता की 100% ऊंचाई का एक इनलाइन-ब्लॉक तत्व जोड़ा गया है, जो कि माता-पिता की ऊंचाई के 100% तक लाइन की ऊंचाई को "पॉप अप" करता है, अर्थात पृष्ठ कार्य क्षेत्र की ऊंचाई तक। आइए इसे अधिक सुरुचिपूर्ण बनाएं - अनावश्यक मार्कअप के बजाय, हम छद्म तत्वों का उपयोग करते हैं:

.popup__overlay :after {<br/> display : inline - block ;<br/> width : 0 ;<br/> height : 100% ;<br/> vertical-align : middle ;<br/> content : '' <br/> } <br/>

यह ओवरले के पारभासी अंधेरे को जोड़ने के लिए बना हुआ है - आरजीबीए इसके साथ सामना करेगा। वह सब है! अब पॉपअप की स्थिति को सीएसएस स्तर पर केवल ब्राउज़र के माध्यम से विनियमित किया जाता है।

अंतिम उदाहरण

देखा विधि के नुकसान में से, कभी-कभी IE 6-7 में प्रदर्शन के साथ ग्लिच उत्पन्न होते हैं, विशेष रूप से, जब फ्लोट का उपयोग करते हैं।

मैं दोहराता हूं - मेरी विधि जेएस के उपयोग को बिल्कुल भी समाप्त नहीं करती है, यह केवल आंशिक रूप से जेएस से सीएसएस को लोड के हिस्से को स्थानांतरित करके पॉप-अप की गति का अनुकूलन करती है।

मुझे यकीन है कि विधि में सुधार किया जा सकता है - दोनों नेत्रहीन और आंतरिक रूप से, और मुझे इस विषय पर किसी भी विचार और सुझाव के साथ-साथ ऑपरेशन और विभिन्न ब्राउज़रों में प्रदर्शन पर टिप्पणियों पर खुशी होगी।

UPD: अनुरोध करने पर, IE7 + - http://jsfiddle.net/vend3tta/SEBt_/ में काम करने वाला एक उदाहरण जोड़ा गया