            |
| मंचों | ट्यूटोरियल | पत्रिका | सेवाएँ | वीडियो | समाचार | ब्लॉग |
| ||
पूर्ण पृष्ठ उपरिशायी खिड़कीAbraham Chaffin
पृष्ठ पॉपप विंडो उपरिशायी को पूरा आप कैसे एक पूरा पृष्ठ पॉपप खिड़की तक कि एक मौजूदा overlays बनाने के लिए इस ट्यूटोरियल सीखना होगा html पृष्ठ. इस तकनीक को कई बार एक वीडियो प्रदर्शन के लिए किया जाता है, फिल्म संचिका, चित्र, या फार्म जब एक वेब पेज में एक तत्व पर एक प्रयोक्ता क्लिकें.
दृश्य उदाहरण परिचयइस तकनीक को एक पॉपप एक तरह खिड़की को आम तौर पर लगता है कि शायद नहीं है. यह एक अलग विंडो नहीं है html ब्राउज़र है, बल्कि एक div कि मौजूदा overlays खोला है html पृष्ठ. इस div अर्ध है और पारदर्शी है कि उपयोगकर्ता की सुविधा देता है एक अच्छा प्रभाव बनाता है कि वे वापस दूसरे पृष्ठ के लिए (div) खिड़की बंद करके प्राप्त कर सकते हैं पता है कि शीर्ष पर है.इस accomplishing के पीछे की विधि बहुत सीधे आगे है: इस div की प्रारंभिक अवस्था है कि करेंगे उपरिशायी पृष्ठ इस में कोई सामग्री के साथ छिपा है आंतरिक है html. कि शुरू में इस खोलने div टैग और समापन div टैग और तत्व के बीच कुछ भी नहीं है इसका मतलब है की कोई भी एक प्रदर्शन किया है. इस div के प्रदर्शन को आरंभ करने के लिए आप पहली बार चुनना होगा और तत्व है कि एक उपयोगकर्ता जाएगा क्लिक पर, हॉवर पर, आदि. इस बर्ताव के लिए आवंटित करने के लिए. आप भी शुरू हो सकता था, जब पेज लोड अगर आप चाहते हैं. आमतौर पर आप एक छवि होगा, बटन, या पाठ कि एक उपयोगकर्ता जावास्क्रिप्ट कार्य आरंभ करने के लिए पर क्लिक. जब div दिखाया जाता है यह मूलतः या''खाली जो जो है तत्वों डिफ़ॉल्ट मूल्य को रिटर्न के प्रदर्शन के लिए कोई भी मूल्य के प्रदर्शन मूल्य निकालने है जावास्क्रिप्ट समारोह के द्वारा प्रदर्शित करने के लिए. दूसरी ने div की अंदरूनी html से भरा है पूर्वनिर्धारित html कोड है कि जो भी आप उपरिशायी विंडो में प्रदर्शित करना चाहते हैं कोड होगा. इस उदाहरण में हम जानते हैं कि केंद्र के लिए स्क्रीन के बीच में इस वीडियो में मदद करता है एक तालिका के अंदर एक वीडियो होगा. वहाँ भी खिड़की या अर्द्ध पारदर्शी पॉपप div पास के एक बटन बंद हो जाएगा. पॉप खिड़की अप में बंद करें बटन पर क्लिक जब यह दिखाया गया था के उलट initiates. इसे वापस करने के लिए कोई नहीं div का प्रदर्शन मूल्य प्रदान और आंतरिक सेटों html वापस करने के लिए कुछ भी नहीं. कोडयहाँ शुरू करने के लिए शुरू से कोड और तब हम इस पर टुकड़ा टुकड़ा करके जायेंगे खत्म करना है:सख्त मोडकोड के इस पंक्ति को बहुत दस्तावेज़ के शीर्ष पर ie7 में सख्त मोड सक्षम करने के लिए आवश्यक है. निर्धारित स्थिति में ie7 यह लागू है और इस ट्यूटोरियल काम नहीं करेगा बिना समर्थित नहीं है. यह भी तय है कि इस स्थिति के रूप में सभी ब्राउज़रों में काम नहीं हो सकता है एक नए CSS संपत्ति है.सीएसएस stylingचलो div के सीएसएस styling पर जाना है और क्या है कि पृष्ठ के आराम overlays यह एक अर्द्ध पारदर्शी div बनाता देखते हैं:इस z-सूचकांक CSS संपत्ति ड्रॉप डाउन मेनू जैसे अन्य सभी तत्व ऊपर z अंतरिक्ष में परत उन्नत करने के लिए प्रयोग किया जाता है, आदि. 10000 के लिए यह बहुत अच्छी तरह से स्थापित है कि आप एक परिभाषित z-सूचकांक है सबसे अन्य तत्वों से ऊपर लाने के लिए जा रहे हैं सुनिश्चित. सबसे कठिन हिस्सा अर्द्ध कई ब्राउज़रों पार पारदर्शी div असर हो रहा है. फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, सफारी, ओपेरा, इन सभी ब्राउज़रों उसी अर्द्ध पारदर्शी CSS संपत्ति सेट का प्रयोग और भी गूगल क्रोम = ओ नहीं. अर्थात् यह फ़िल्टर सेटिंग्स का उपयोग करता है. Mozilla फ़ायरफ़ॉक्स "है mox-अस्पष्टता". और दूसरों को इस्तेमाल "अस्पष्टता" जो मुझे करने के लिए और सबसे अधिक उपयुक्त है उम्मीद है कि भविष्य में मानक बन जाएगा. पहली पंक्ति "# displaybox ("इस displaybox आईडी के साथ तत्व करने के लिए निम्नलिखित शैली प्रदान. इस अस्पष्टता बनाने के लिए अगले पांच लाइनें अलग हैं तरीकों 50% करने के लिए सेट " फ़िल्टर: अल्फा (अस्पष्टता = 50); / * पुराने अर्थात् * / फ़िल्टर:PROGID:Dximagetransform.microsoft.अल्फा (अस्पष्टता = 50); / * अर्थात् * / -moz-अस्पष्टता: .50; / * पुराने Mozilla * / -khtml-मत पारदर्श: 0.5; / * पुराने सफारी * / मत पारदर्श: 0.5; / * वर्तमान Mozilla द्वारा समर्थित, सफारी, और ओपेरा * / " केवल 5 परिवर्तन, .आपको क्या पसंद करने के लिए 5 या 50 मूल्यों. उदाहरण 50% अस्पष्टता के लिए सेट कर दिया जाता है. "पृष्ठभूमि का रंग:# 000000;"पाठ्यक्रम की पृष्ठभूमि का रंग काला और फिर 50% पारदर्शिता कर देगा बनाता है यह ग्रे. "स्थिति:तय;"रिश्तेदार या पृष्ठ के प्रवाह में पूर्ण नहीं तय होने की स्थिति सेट. यह ऐसा तत्व बाहर कूद कर सकते हैं और अन्य तत्वों के ऊपर फ्लोट और खिड़की के लिए निर्धारित की जानी है और नहीं पृष्ठ या अन्य तत्वों बनाता है. सापेक्ष स्थिति पृष्ठ के प्रवाह में और तत्व डालता ले जाया जाता है और यह लगभग अन्य तत्वों चालें. निरपेक्ष ऊपर है, लेकिन इस पृष्ठ पर नहीं खिड़की रिश्तेदार है तैरता, अगर आप ही पृष्ठ के शीर्ष पर रहना होगा इस तत्व का उपयोग किया. "चोटी:0px; छोड़ा:0px; चौड़ाई:100%; ऊंचाई:100%;"शीर्ष पर कोने छोड़ दिया और जहाँ तक यह खिड़की के पार जा सकती है इसे बाहर फैलता सेमीफाइनल पारदर्शी div स्थानों. "Text-align:केंद्र; ऊर्ध्वाधर-align:मध्यम;"मेरी शुरुआत प्रयास पृष्ठ के बीच करने के लिए div के अंदर करने के लिए केन्द्र को तत्व है. जावास्क्रिप्टअब लग रहा है कि जब उपयोगकर्ता को पेज के साथ interacts और जावास्क्रिप्ट समारोह executes तत्व बदल देता है जो जावास्क्रिप्ट पर एक नज़र करते हैं:इस समारोह की पहली पंक्ति "समारोह का नाम की घोषणासमारोह क्लिकर () ("पेज में उपयोग करने के लिए. "Var Thediv = दस्तावेज़.( 'displaybox') getelementbyid; " "चर" displaybox "की पहचान के साथ div को Thediv" का मूल्य सेट. "Thediv" चर समारोह के बाकी के माध्यम से इतनी ब्राउज़र पुनः करने के लिए नहीं है कि displaybox तत्व मिल उपयोग किया जाएगा. "अगर (Thediv.शैली.प्रदर्शन == "कोई नहीं") ("बुनियादी तौर पर कहते हैं, "अगर अभी Thediv प्रदर्शित नहीं किया जा रहा है मैं तुम्हारे बारे में बताने के लिए क्या कर रहा हूँ." Thediv "दृश्य बनानाThediv.शैली.प्रदर्शन = "";". इस में ड्रॉप html Thediv "मेंThediv.Innerhtml = "a href='#' onclick='return clicker();' विंडो बंद करें / a"". तुम्हें यहाँ रखा जाएगा दो उद्धरण चिह्न inbetween जो html आप प्रदर्शित करना चाहते हैं. ताकि आप में एक उद्धरण का उपयोग करना चाहिए कि एक और बोली होने [ "] इस टैग का अंत हो जाएगा याद तुम्हारी html [ '] या भागने [ "] [एक backslash का उपयोग] सभी बोलियां ई के सामने से.g. [ "]. क्या तुम कहीं में वहाँ फिर से की क्षमता खिड़की बंद करने के लिए चाहिए था. अन्य बुद्धिमान उपयोगकर्ता पृष्ठ के शीर्ष पर खिड़की और वापस लाने के लिए सक्षम नहीं के साथ अटक मिलेगा. ") और ("अगर div तो दिखाई थी... "Thediv.शैली.प्रदर्शन = "कोई नहीं";"इसे छुपाने "Thediv.Innerhtml ='';"और कुछ नहीं करने के लिए अपनी सामग्री को निर्धारित. "}और अगर इस बयान के "अंत. "वापसी झूठी;"इस समारोह के लिए झूठी वापसी. यह मूलतः यह इतना है कि वास्तव में कड़ी href इस पर जब आप क्लिक के गंतव्य के लिए जाना नहीं है बनाता है. अगर आप एक लिंक पर एक onclick विधि का उपयोग करें. "}इस समारोह के "अंत. यह काम कर रहीयह वास्तव में आप कहीं पृष्ठ के शुरू और कुछ क्लिक करने के लिए उपयोगकर्ता के लिए में छुपा में div की आवश्यकता है पृष्ठ में काम करने के लिए:इस छिपी displaybox div: कि एक कड़ी क्रियान्वित करेगा और क्लिकर जावास्क्रिप्ट समारोह onclick वापसी: दृश्य उदाहरण यह आप कैसे हैं और इस प्रभाव पैदा करने के लिए भी पर्याप्त को समायोजित करने के लिए समझने तुम्हें देने के कुछ सुझाव देना चाहिए, बदलना, और वह अपने खुद में जाने के लिए हेरफेर html लेआउट. आनंद लेना! | |||||||||||||
|
मंचों • ट्यूटोरियल • पत्रिका • सेवाएँ • वीडियो • समाचार • ब्लॉग © CreativeCOW.net सभी अधिकार सुरक्षित हैं. क्रिएटिव समुदाय को दुनिया की [चोटी] English • العربية • 中文 • Français • Deutsch • עברית • हिन्दी • Italiano • 日本語 • Português • Русский • Español |
