पॉपअप विंडोज बनाने के तरीके

परिचय

इस पाठ में, मैं अनुभवी लेआउट डिजाइनरों और सीएसएस गुरुओं के लिए रहस्य का खुलासा नहीं करूंगा, लेकिन यह लेख शुरुआती लोगों के लिए उपयोगी होगा। यह वह जगह है जहाँ आप सीख सकते हैं कि किसी संपूर्ण साइट के शीर्ष पर पॉप-अप कैसे बनाया जाए।

अक्सर, ऐसी खिड़कियां साइट पर कुछ कार्यों को करने के बाद दिखाई देती हैं, उदाहरण के लिए, उपयोगकर्ता "अनुरोध पर कॉल बैक" लिंक पर क्लिक करता है और उसके सामने एक ऑर्डर फॉर्म पॉप अप होता है।

यह अजाक्स के साथ संयोजन में पॉपअप विंडोज़ का उपयोग करने के लिए बहुत सुविधाजनक है, लेकिन यह एक और सबक का विषय है।

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

VKontakte

फेसबुक

चहचहाना

मुझे लगता है कि सवाल का अध्ययन शुरू करने के लिए पर्याप्त कारण हैं: आपकी साइट पर पॉपअप पॉप-अप कैसे करें।

समस्या का कथन (TOR)

आपको पूरी साइट के शीर्ष पर एक डिमिंग स्क्रीन के साथ एक पॉप-अप विंडो बनाने की आवश्यकता है।

निर्णय

विधि 1

एचटीएमएल

<div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div> 

सीएसएस

 *{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; height: 2000px; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } 

परिणाम:

बहुत बार वे सुझाव देते हैं:

 position:absolute; 

हां, परिणाम समान है, लेकिन इस तथ्य के कारण कि हमने "डिमिंग" ब्लॉक की ऊंचाई निर्धारित की है, स्क्रॉल बार दिखाई देते हैं। इसीलिए यह विधि उपयुक्त नहीं है।

विधि 2

यह विधि मौलिक रूप से विधि 1 से भिन्न नहीं है, लेकिन मुझे यह अधिक सुविधाजनक लगता है।

Html (कोई परिवर्तन नहीं)

 <div class="b-container"> Sample Text </div> <div class="b-popup"> <div class="b-popup-content"> Text in Popup </div> </div> 

सीएसएस

 *{ font-family: Areal; } .b-container{ width:200px; height:150px; background-color: #ccc; margin:0px auto; padding:10px; font-size:30px; color: #fff; } .b-popup{ width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; } .b-popup .b-popup-content{ margin:40px auto 0px auto; width:100px; height: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } 

परिणाम समान है।

संपत्ति के कारण: न्यूनतम ऊंचाई: 100%; हमारे "डिमिंग" ब्लॉक ने 100% की चौड़ाई और स्क्रीन की न्यूनतम ऊंचाई 100% हासिल कर ली है।

इस पद्धति का एकमात्र नुकसान यह है कि इंटरनेट एक्सप्लोरर केवल 8.0 संस्करण से इस संपत्ति का समर्थन करता है।

Jquery में जादू जोड़ना

अब हमारे पॉपअप को छिपाने / दिखाने के लिए लिंक जोड़ें।

ऐसा करने के लिए, आपको jQuery लाइब्रेरी और एक छोटी स्क्रिप्ट कनेक्ट करनी होगी:

 <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script> $(document).ready(function(){ // PopUp    PopUpHide(); }); //  PopUp function PopUpShow(){ $("#popup1").show(); } //  PopUp function PopUpHide(){ $("#popup1").hide(); } </script> 

आपको Html को भी अपडेट करना होगा:

 <div class="b-container"> Sample Text <a href="javascript:PopUpShow()">Show popup</a> </div> <div class="b-popup" id="popup1"> <div class="b-popup-content"> Text in Popup <a href="javascript:PopUpHide()">Hide popup</a> </div> </div> 

परिणाम

अब जब पेज लोड होगा, तो पॉपअप पॉपअप विंडो गायब हो जाएगी।

यदि हम "शो पॉपअप" लिंक पर क्लिक करते हैं, तो एक पॉप-अप विंडो दिखाई देगी। और यदि आप "पॉपअप छुपाएं" लिंक पर क्लिक करते हैं, तो पॉप-अप विंडो फिर से गायब हो जाएगी।

परिणाम यहाँ देखा जा सकता है: http://jsfiddle.net/p7NbX/15/