दिलचस्प पोस्ट
वेब अनुप्रयोग में अन्य सभी बीन्स को नष्ट करने से पहले मैं स्प्रिंग कार्य निष्पादक / शेड्यूलर पूल कैसे बंद कर सकता हूं? प्रत्येक () फ़ंक्शन के अंदर एकाधिक AJAX कॉल करता है .. फिर एक बार सब कुछ खत्म हो गया है? पायथन में मॉड्यूलर गुणात्मक व्युत्क्रम फ़ंक्शन एक पूर्णांक को सौंपा जाता है तो पाउ () का रिटर्न वैल्यू गुणा हो जाता है '…' का कारण आंतरिक या बाहरी कमांड, ऑपरेटिव प्रोग्राम या बैच फ़ाइल के रूप में क्यों नहीं माना जाता है? Android पर चलाने के लिए मैं एक देशी (कमांड लाइन) निष्पादन योग्य कैसे बना सकता हूं? PHP – mysql डेटाबेस में सीएसवी फ़ाइल आयात करें लोड डेटा का उपयोग करके INFILE दो तिथियों मोंगोडीबी के बीच ऑब्जेक्ट खोजें स्विफ्ट भाषा NSClassFromString यह <span /> tags को <option /> टैग में डाल देना बुरा है, केवल स्ट्रिंग हेरफेर के लिए नहीं स्टाइल? सीयूडीए ने इतनी जल्दी मेमोरी क्यों रखी है? मुझे क्यों "एक्सेस-कंट्रोल-अनुमति-उत्पत्ति द्वारा त्रुटि की अनुमति नहीं है" त्रुटि देख रहा हूं? IOS अनुप्रयोग में वैश्विक स्थिरांक को स्टोर करने के लिए कहां? सी ++ टेम्पलेट्स, अपरिभाषित संदर्भ MySQL जांचता है कि एक टेबल अपवाद फेंके बिना मौजूद है

कैसे jQuery का उपयोग कर एक सरल पॉपअप उत्पन्न करने के लिए

मैं एक वेब पेज तैयार कर रहा हूँ जब हम डिवेल नाम की सामग्री पर क्लिक करते हैं, तो मैं एक पॉप-अप विंडो कैसे दिखा सकता हूँ जिसमें एक लेबल ईमेल और टेक्स्ट बॉक्स है?

वेब के समाधान से एकत्रित समाधान "कैसे jQuery का उपयोग कर एक सरल पॉपअप उत्पन्न करने के लिए"

यह सरल किसी प्लगइन की आवश्यकता नहीं है यह बहुत सारे कोड की तरह दिख सकता है लेकिन यह वास्तव में बहुत आसान है।

सबसे पहले सीएसएस – यह आप की तरह हालांकि यह tweak:

a.selected { background-color:#1F75CC; color:white; z-index:100; } .messagepop { background-color:#FFFFFF; border:1px solid #999999; cursor:default; display:none; margin-top: 15px; position:absolute; text-align:left; width:394px; z-index:50; padding: 25px 25px 20px; } label { display: block; margin-bottom: 3px; padding-left: 15px; text-indent: -15px; } .messagepop p, .messagepop.div { border-bottom: 1px solid #EFEFEF; margin: 8px 0; padding-bottom: 8px; } 

और जावास्क्रिप्ट:

 function deselect(e) { $('.pop').slideFadeToggle(function() { e.removeClass('selected'); }); } $(function() { $('#contact').on('click', function() { if($(this).hasClass('selected')) { deselect($(this)); } else { $(this).addClass('selected'); $('.pop').slideFadeToggle(); } return false; }); $('.close').on('click', function() { deselect($('#contact')); return false; }); }); $.fn.slideFadeToggle = function(easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback); }; 

और अंत में एचटीएमएल:

 <div class="messagepop pop"> <form method="post" id="new_message" action="/messages"> <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p> <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p> <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p> </form> </div> <a href="/contact" id="contact">Contact Us</a> 

यहां एक जेएसफाइड डेमो और कार्यान्वयन है।

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

HTML हो जाता है:

 <div> <div class="messagepop pop"></div> <a href="/contact" id="contact">Contact Us</a> </div> 

और जावास्क्रिप्ट का सामान्य विचार बन जाता है:

 $("#contact").on('click', function() { if($(this).hasClass("selected")) { deselect(); } else { $(this).addClass("selected"); $.get(this.href, function(data) { $(".pop").html(data).slideFadeToggle(function() { $("input[type=text]:first").focus(); }); } } return false; }); 

JQuery UI संवाद देखें आप इसे इस तरह प्रयोग करेंगे:

JQuery:

 $(document).ready(function() { $("#dialog").dialog(); }); 

मार्कअप:

 <div id="dialog" title="Dialog Title">I'm in a dialog</div> 

किया हुआ!

ध्यान रखें कि सरल प्रयोग-मामले के बारे में है, मैं इसके बारे में बेहतर विचार प्राप्त करने के लिए दस्तावेज पढ़ने का सुझाव दे सकता हूं कि इसके साथ क्या किया जा सकता है।

मैं ColorBox नामक jQuery प्लगइन का उपयोग करता हूं, यह है

  1. प्रयोग करने में बहुत आसान है
  2. हल्के
  3. अनुकूलन
  4. सबसे अच्छा पॉपअप संवाद मैं अभी तक jQuery के लिए देखा है

इस यूआरएल पर जाएं

Jquery UI संवाद डेमो

Magnific Popup को आज़माएं, यह उत्तरदायी है और वजन लगभग 3KB है

मुझे लगता है कि यह एक सरल jquery पॉपअप लिखने के लिए एक महान ट्यूटोरियल है । प्लस यह बहुत सुंदर लग रहा है

इस प्रकार का एक अच्छा, सरल उदाहरण है, यहां: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

अत्यंत हल्के मॉडल पॉपअप प्लगइन पॉप – http://welbour.com/labs/popelt/

यह हल्के है, नेस्टेड पॉपअप का समर्थन करता है, ऑब्जेक्ट ओरिएंटेड, डायनामिक बटनों का समर्थन करता है, उत्तरदायी है, और बहुत कुछ। अगला अपडेट में पॉपअप अजाक्स फ़ॉर्म सबमिशन इत्यादि शामिल होंगे।

बेझिझक उपयोग और ट्वीट फ़ीडबैक।

Html5 और javascript का उपयोग करके सरल पॉपअप विंडो।

एचटीएमएल: –

  <dialog id="window"> <h3>Sample Dialog!</h3> <p>Lorem ipsum dolor sit amet</p> <button id="exit">Close Dialog</button> </dialog> <button id="show">Show Dialog</button> 

जावास्क्रिप्ट: –

  (function() { var dialog = document.getElementById('window'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('exit').onclick = function() { dialog.close(); }; })(); 

यहां एक बहुत ही सरल पॉपअप है:

 <!DOCTYPE html> <html> <head> <style> #modal { position:absolute; background:gray; padding:8px; } #content { background:white; padding:20px; } #close { position:absolute; background:url(close.png); width:24px; height:27px; top:-7px; right:-7px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> var modal = (function(){ // Generate the HTML and add it to the document $modal = $('<div id="modal"></div>'); $content = $('<div id="content"></div>'); $close = $('<a id="close" href="#"></a>'); $modal.hide(); $modal.append($content, $close); $(document).ready(function(){ $('body').append($modal); }); $close.click(function(e){ e.preventDefault(); $modal.hide(); $content.empty(); }); // Open the modal return function (content) { $content.html(content); // Center the modal in the viewport $modal.css({ top: ($(window).height() - $modal.outerHeight()) / 2, left: ($(window).width() - $modal.outerWidth()) / 2 }); $modal.show(); }; }()); // Wait until the DOM has loaded before querying the document $(document).ready(function(){ $('a#popup').click(function(e){ modal("<p>This is popup's content.</p>"); e.preventDefault(); }); }); </script> </head> <body> <a id='popup' href='#'>Simple popup</a> </body> </html> 

इस ट्यूटोरियल में अधिक लचीला समाधान पाया जा सकता है: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ नमूना के लिए यहां पर करीब है ।

केवल सीएसएस पॉपअप LOGIC! कोशिश करो आईटी आसान! मुझे लगता है कि यह भविष्य भविष्य में लोकप्रिय होना चाहिए

  <a href="#openModal">OPEN</a> <div id="openModal" class="modalDialog"> <div> <a href="#close" class="close">X</a> <h2>MODAL</h2> </div> </div> .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; } .modalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }