वेब निर्माण में विभिन्न प्रकार के उद्देश्यों के लिए पॉप-अप विंडो के कई उपयोग हैं। उनका उपयोग विभिन्न प्रकार के मेनू बनाने के लिए किया जा सकता है, जटिल रूपों को भरते समय विज्ञापन टेक्स्ट और ग्राफिक्स, टूलटिप्स रखने के लिए, और फॉर्म को उन विंडो में रखना सुविधाजनक होता है जो पृष्ठ पर जगह नहीं लेते हैं। हमारे लेख में आपको इस बात का विवरण मिलेगा कि आप ऐसी खिड़की कैसे बना सकते हैं।
यह आवश्यक है
एचटीएमएल का बुनियादी ज्ञान।
अनुदेश
चरण 1
पॉपअप, html, हिडन लेयर
चरण दो
वेब पर कई पृष्ठों पर, आप देख सकते हैं कि विभिन्न जावास्क्रिप्ट ढांचे (jQuery, MooTools, प्रोटोटाइप, आदि) के फैंसी पुस्तकालयों का उपयोग पृष्ठों में पॉप-अप विंडो बनाने के लिए किया जाता है। हालांकि, वास्तव में, इस विशेष समस्या को हल करते समय वे आवश्यक नहीं हैं। हाइपरटेक्स्ट मार्कअप लैंग्वेज (एचटीएमएल) और कैस्केडिंग स्टाइल शीट्स (सीएसएस) में उपलब्ध टूल पॉप-अप बनाने के लिए पर्याप्त हैं। विज़िटर के ब्राउज़र में जावास्क्रिप्ट सक्षम है या नहीं, इस पर ध्यान दिए बिना इस तरह से बनाई गई विंडो काम करेंगी।
पॉपअप बनाने वाले सभी कोड को दो पंक्तियों में रखा जा सकता है। पहली पंक्ति एक लिंक बनाती है जिसे पॉपअप प्रदर्शित करने के लिए क्लिक किया जाना चाहिए:
यहाँ क्लिक करें!
यहां, लिंक टैग की ऑनमाउसओवर विशेषता लिंक के लिए डिफ़ॉल्ट माउस कर्सर प्रकार सेट करती है। ऑनक्लिक विशेषता निर्दिष्ट करती है कि जब लिंक पर क्लिक किया जाता है, तो छिपा हुआ पॉपअप ब्लॉक दिखाई देना चाहिए।
दूसरी पंक्ति, वास्तव में, पॉप-अप विंडो है। पॉपअप पहचानकर्ता के साथ परत और शैली विशेषता में निर्दिष्ट विंडो का आकार, रंग और पाठ का आकार, पृष्ठभूमि और सीमा:
यह पॉपअप में टेक्स्ट है
यह डिफ़ॉल्ट रूप से दिखाई नहीं देता है - यह प्रदर्शन चयनकर्ता द्वारा परत शैली विवरण में किसी के मान के साथ इंगित नहीं किया जाता है।
दरअसल, पॉप-अप विंडो बनाने के लिए आपको बस इतना ही करना है - इन दो पंक्तियों को टैग और अपने पेज के बीच रखें और यह जाने के लिए तैयार है।
चरण 3
टैग के सामने पॉप-अप विंडो को बंद करने में सक्षम होने के लिए, आपको एक लिंक जोड़ना होगा जो विपरीत क्रिया करता है - पॉपअप पहचानकर्ता के साथ दृश्यमान परत को छिपाना:
बंद करे
चरण 4
और यदि आप चाहते हैं कि विंडो क्लिक करके नहीं, बल्कि माउस कर्सर को मँडराकर पॉप अप हो, तो लिंक के साथ पहली पंक्ति को इस तरह से संशोधित किया जाना चाहिए:
यहाँ पर माउस ले जाएँ!
चरण 5
अब आप पॉप-अप विंडो कोड के सिद्धांत और संरचना से परिचित हैं, और इसकी उपस्थिति और सामग्री का डिज़ाइन पूरी तरह से आपके लक्ष्यों और कल्पना पर निर्भर करता है।
