किकस्टार्ट HTML पॉपअप

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

इस लेखन के समय HTML किकस्टार्ट का मौजूदा संस्करण 0.9 MIT।

मैंने जो पहली चीज़ की, वह मेरे जावास्क्रिप्ट के लिए एक अलग फ़ाइल बना रही थी। मैंने इसे "user.js" कहा और इसे "js" फ़ोल्डर में डाल दिया और तुरंत पृष्ठ पर जोड़ दिया।

<script type="text/javascript" src="js/user.js"></script> 

जितना संभव हो सके पेज को ब्लॉक के अलावा को सरल बनाने का निर्णय लिया गया था ताकि आप इन ब्लॉकों को मक्खी पर कोड में सम्मिलित कर सकें, लेकिन पहले आपको एक सब्सट्रेट बनाने की आवश्यकता है जो पेज को शेड करता है। क्लोजिंग बॉडी टैग के ठीक ऊपर, मैंने आईडी बीजी के साथ एक div डाला:

 <div id="bg"></div> 

Style.css में, जो रूट पर स्थित है, मैंने इसके लिए निम्नलिखित शैलियाँ निर्धारित की हैं:

 #bg { width:100%; height:100%; position:fixed; top:0;left:0; background:black; display:none; z-index:601; /*  ,     KickStart  z-index 600 */ opacity:0.3; } 

खुलने वाले ब्लॉक के लिए, मैंने "हिडनब्लॉक" क्लास असाइन करने और एक यूनिक आईडी असाइन करने का फैसला किया:

 <div class="hiddenBlock" id="createUser">  </div> <div id="bg"></div> 

सीएसएस में, इसने "हिडनब्लॉक" वर्ग का वर्णन किया:

 .hiddenBlock { position:absolute; top:20%; left:50%; z-index:602; width:400px; background:#efefef; border: 1px solid #ccc; padding:10px 20px; border-radius:10px; margin-left:-210px; display:none; } 

विंडो खोलने वाले बटन के लिए, मैंने "बॉक्स" विशेषता को उस विंडो की आईडी के साथ जोड़ा, जिसे इसे खोलना चाहिए और इसमें "शो" वर्ग जोड़ा जाना चाहिए:

 <button class="medium blue show" box="createUser"></button> 

विंडो बंद करने के लिए, मैंने उसमें "करीब" क्लास वाला एक बटन बनाया:

 <button class="medium blue close"></button> 

ठीक है, कोड ही, अंत में:

 $(document).ready(function(){ $(".show").click(function(){ $("#bg").show(); $("#"+($(this).attr("box"))).slideDown("fast"); }); $(".close").click(function(){ $("#bg").hide(); $(".hiddenBlock").slideUp("fast"); return false; //   ,     }) }); 

यह इस तरह समाप्त हुआ:

 <button class="medium blue show" box="createUser"></button> <div class="hiddenBlock" id="createUser"> <form action="index.php" method="post">    (    ) <button class="medium green"></button> <button class="medium blue close"></button> </form> </div> <div id="bg"></div> 

कार्य प्रदर्शन
मुझे आशा है कि किसी को यह जानकारी उपयोगी लगेगी।