दिलचस्प पोस्ट
एसक्यूएल – एक क्वेरी में कई तालिकाओं में डालें जावास्क्रिप्ट में JSON पार्स करें? नोड / एक्सप्रेस: ​​EADDRINUSE, पता पहले से उपयोग में है – सर्वर को मार डालो जर्सी के शांत वेब सेवा में अन्य ऑब्जेक्ट के साथ फ़ाइल अपलोड करें जांचें कि जावास्क्रिप्ट PHP के साथ सक्षम है या नहीं पायथन के eval () की सुरक्षा अविश्वसनीय स्ट्रिंग पर? सीएमडी.एक्सए (बैच) स्क्रिप्ट में एआरए, लिंक्ड सूचियां और अन्य डेटा संरचनाएं कैसे सीएसएस में एक छवि पर पाठ की स्थिति जावा कोड बाइट को हेक्साडेसिमल में कनवर्ट करने के लिए क्यों numpy के einsum तेजी से numpy के कार्यों में बनाया गया है? फ्लास्क अनुरोध में प्राप्त आंकड़े कैसे प्राप्त करें मुझे फ्लोटिंग प्वाइंट तुलना कैसे करनी चाहिए? प्रोग्रामिंग ब्लूटूथ को iphone एसडीके में चालू करें? कैसे सी में एक समारोह में 2 डी सरणी (मैट्रिक्स) पारित करने के लिए? PHP स्क्रिप्ट के कमांडलाइन बनाम http निष्पादन को निर्धारित करने के लिए वैधानिक तरीका क्या है?

jQuery UI – बंद संवाद जब बाहर क्लिक किया गया

मेरे पास एक jQuery UI संवाद है जो विशिष्ट तत्व क्लिक किए जाने पर प्रदर्शित होता है। मैं संवाद को बंद करना चाहूंगा यदि कोई अन्य ट्रिगिंग तत्वों या डायलॉग पर ही क्लिक करता है,

संवाद खोलने के लिए यहां कोड दिया गया है:

$(document).ready(function() { var $field_hint = $('<div></div>') .dialog({ autoOpen: false, minHeight: 50, resizable: false, width: 375 }); $('.hint').click(function() { var $hint = $(this); $field_hint.html($hint.html()); $field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]); $field_hint.dialog('option', 'title', $hint.siblings('label').html()); $field_hint.dialog('open'); }); /*$(document).click(function() { $field_hint.dialog('close'); });*/ }); 

अगर मैं आखिरी भाग को हटाना चाहता हूं, तो संवाद कभी नहीं खुलता है मैं मानता हूं क्योंकि संवाद खोलने वाला एक ही क्लिक फिर से बंद हो रहा है।


अंतिम कार्य कोड
नोट: यह jQuery के बाहर की घटनाओं प्लगइन का उपयोग कर रहा है

 $(document).ready(function() { // dialog element to .hint var $field_hint = $('<div></div>') .dialog({ autoOpen: false, minHeight: 0, resizable: false, width: 376 }) .bind('clickoutside', function(e) { $target = $(e.target); if (!$target.filter('.hint').length && !$target.filter('.hintclickicon').length) { $field_hint.dialog('close'); } }); // attach dialog element to .hint elements $('.hint').click(function() { var $hint = $(this); $field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>'); $field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]); $field_hint.dialog('option', 'title', $hint.siblings('label').html()); $field_hint.dialog('open'); }); // trigger .hint dialog with an anchor tag referencing the form element $('.hintclickicon').click(function(e) { e.preventDefault(); $($(this).get(0).hash + ' .hint').trigger('click'); }); }); 

वेब के समाधान से एकत्रित समाधान "jQuery UI – बंद संवाद जब बाहर क्लिक किया गया"

JQuery बाहर की घटनाओं प्लगइन की जाँच करें

आप ये करते हैं:

 $field_hint.bind('clickoutside',function(){ $field_hint.dialog('close'); }); 

इतने लंबे समय के बाद इस को खींचने के लिए क्षमा करें, लेकिन मैं नीचे का इस्तेमाल किया कोई नुकसान? खुला फ़ंक्शन देखें …

 $("#popup").dialog( { height: 670, width: 680, modal: true, autoOpen: false, close: function(event, ui) { $('#wrap').show(); }, open: function(event, ui) { $('.ui-widget-overlay').bind('click', function() { $("#popup").dialog('close'); }); } }); 

एक और प्लगइन का उपयोग भूल जाओ:

पॉपिन के बाहर क्लिक करते समय एक jQuery UI संवाद बंद करने के लिए यहां 3 तरीके हैं:

यदि डायलॉग मोडल है / पृष्ठभूमि ओवरले है: http://jsfiddle.net/jasonday/6FGqN/

 jQuery(document).ready(function() { jQuery("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 100, modal: true, open: function(){ jQuery('.ui-widget-overlay').bind('click',function(){ jQuery('#dialog').dialog('close'); }) } }); }); 

यदि संवाद गैर-मोडल है विधि 1: विधि 1: http://jsfiddle.net/jasonday/xpkFf/

  // Close Pop-in If the user clicks anywhere else on the page jQuery('body') .bind( 'click', function(e){ if( jQuery('#dialog').dialog('isOpen') && !jQuery(e.target).is('.ui-dialog, a') && !jQuery(e.target).closest('.ui-dialog').length ){ jQuery('#dialog').dialog('close'); } } ); 

गैर-मॉडल संवाद विधि 2: http://jsfiddle.net/jasonday/eccKr/

  $(function() { $( "#dialog" ).dialog({ autoOpen: false, minHeight: 100, width: 342, draggable: true, resizable: false, modal: false, closeText: 'Close', open: function() { closedialog = 1; $(document).bind('click', overlayclickclose); }, focus: function() { closedialog = 0; }, close: function() { $(document).unbind('click'); } }); $('#linkID').click(function() { $('#dialog').dialog('open'); closedialog = 0; }); var closedialog; function overlayclickclose() { if (closedialog) { $('#dialog').dialog('close'); } //set to one because click on dialog box sets to zero closedialog = 1; } }); 

बस इस वैश्विक स्क्रिप्ट को जोड़ दें, जो सभी मोडल संवाद बंद कर देते हैं, बस उन पर क्लिक करके क्लिक करें

 $(document).ready(function() { $(document.body).on("click", ".ui-widget-overlay", function() { $.each($(".ui-dialog"), function() { var $dialog; $dialog = $(this).children(".ui-dialog-content"); if($dialog.dialog("option", "modal")) { $dialog.dialog("close"); } }); });; }); 
 $(".ui-widget-overlay").click (function () { $("#dialog-id").dialog( "close" ); }); 

बेडल कार्रवाई में ऊपर कोड दिखा रहा है

मुझे दो हिस्सों को करना था सबसे पहले क्लिक-हेन्डलर:

 $(document).on('click', function(e){ if ($(".ui-dialog").length) { if (!$(e.target).parents().filter('.ui-dialog').length) { $('.ui-dialog-content').dialog('close'); } } }); 

यह सामान्य ui-dialog-content वर्ग पर dialog('close') कॉल करता है, और इसलिए सभी संवाद बंद कर दिए जाएंगे यदि क्लिक एक में नहीं हुआ है यह मोडल संवादों के साथ भी काम करेगा, चूंकि ओवरले .ui-dialog बॉक्स का हिस्सा नहीं है।

यह समस्या है:

  1. अधिकांश संवाद एक संवाद के बाहर क्लिक के कारण बनाए जाते हैं
  2. यह हैंडलर चलने के बाद उन क्लिकों ने एक संवाद बना दिया है और दस्तावेज तक ऊपर उठाया है, इसलिए यह तुरंत उन्हें बंद कर देता है

इसे ठीक करने के लिए, मुझे उन क्लिक हैंडलर्स को स्टॉपप्रोफ़ेशन जोड़ना था:

 moreLink.on('click', function (e) { listBox.dialog(); e.stopPropagation(); //Don't trigger the outside click handler }); 

यह सवाल थोड़ा पुराना है, लेकिन अगर कोई उस संवाद को बंद करना चाहता है, जो उपयोगकर्ता न कहीं पर क्लिक करता है, तो आप इसका उपयोग कर सकते हैं जो मैंने जेसीआई यूआई मल्टीसेचुअल प्लगइन से लिया था। मुख्य लाभ यह है कि क्लिक "खोया" नहीं है (यदि उपयोगकर्ता लिंक या बटन पर क्लिक करना चाहता है, तो कार्रवाई की गई है)।

 $myselector.dialog({ title: "Dialog that closes when user clicks outside", modal:false, close: function(){ $(document).off('mousedown.mydialog'); }, open: function(event, ui) { var $dialog = $(this).dialog('widget'); $(document).on('mousedown.mydialog', function(e) { // Close when user clicks elsewhere if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){ $myselector.dialog('close'); } }); } }); 

आप किसी भी अतिरिक्त प्लग-इन का उपयोग किए बिना ऐसा कर सकते हैं

 var $dialog= $(document.createElement("div")).appendTo(document.body); var dialogOverlay; $dialog.dialog({ title: "Your title", modal: true, resizable: true, draggable: false, autoOpen: false, width: "auto", show: "fade", hide: "fade", open:function(){ $dialog.dialog('widget').animate({ width: "+=300", left: "-=150" }); //get the last overlay in the dom $dialogOverlay = $(".ui-widget-overlay").last(); //remove any event handler bound to it. $dialogOverlay.unbind(); $dialogOverlay.click(function(){ //close the dialog whenever the overlay is clicked. $dialog.dialog("close"); }); } }); 

यहां $ संवाद संवाद है हम जो मूल रूप से कर रहे हैं, जब भी यह ओवरले विजेट क्लिक किया जाता है, तब भी जब यह संवाद खोला जाता है और उस ओवरले को एक क्लिक हैंडलर को बाध्य करने के लिए $ संवाद को बंद करने के लिए है।

बाहर की घटनाओं प्लगइन के लिए कोई ज़रूरत नहीं है …

बस .ui-widget-overlay div में एक ईवेंट हैंडलर जोड़ें:

 jQuery(document).on('click', 'body > .ui-widget-overlay', function(){ jQuery("#ui-dialog-selector-goes-here").dialog("close"); return false; }); 

बस यह सुनिश्चित करें कि jQuery UI संवाद के लिए आपने जो भी चयनकर्ता इस्तेमाल किया है, इसे बंद करने के लिए भी कहा जाता है .. यानी # ui-dialog-selector-goes-here

यह jQuery UI का उपयोग नहीं करता है, लेकिन jQuery का उपयोग करता है, और जो भी कारण के लिए jQuery के UI का उपयोग नहीं कर रहे हैं उन लोगों के लिए उपयोगी हो सकते हैं। ऐसा करना पसंद करें:

 function showDialog(){ $('#dialog').show(); $('*').on('click',function(e){ $('#zoomer').hide(); }); } $(document).ready(function(){ showDialog(); }); 

इसलिए, एक बार मैंने एक संवाद दिखाया है, मैं एक क्लिक हैंडलर जोड़ता हूं जो केवल कुछ पर पहली क्लिक के लिए दिखता है

अब, यह अच्छा होगा अगर मैं इसे # डायलॉग और इसके सामग्रियों पर कुछ भी क्लिकों को अनदेखा कर सकता हूं, लेकिन जब मैंने $ (': नहीं ("# डायलॉग, # डायलॉग *") के साथ $ (' * ') स्विच करने की कोशिश की थी '), यह अभी भी #dialog क्लिक्स का पता लगाया है।

वैसे भी, मैं इसे पूरी तरह से एक तस्वीर लाइटबॉक्स के लिए उपयोग कर रहा था, इसलिए यह उस उद्देश्य के लिए ठीक काम किया।

दिए गए उदाहरण (एस) आईडी '#dialog' के साथ एक संवाद का उपयोग करते हैं, मुझे एक समाधान की जरूरत है जो किसी संवाद को बंद कर देती है:

 $.extend($.ui.dialog.prototype.options, { modal: true, open: function(object) { jQuery('.ui-widget-overlay').bind('click', function() { var id = jQuery(object.target).attr('id'); jQuery('#'+id).dialog('close'); }) } }); 

प्रोटोटाइप का उपयोग करने के सुझाव के लिए अपने सहयोगी तुम्हारी अर्कस्टीजन के लिए धन्यवाद।

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

यहां अधिक जानकारी: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget- जब- क्लिकिंग -आउटआइड

लॉरेंट

मैं यहां इस पोस्ट पर आधारित इस समाधान का उपयोग करता हूं:

 var g_divOpenDialog = null; function _openDlg(l_d) { // http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside jQuery('body').bind( 'click', function(e){ if( g_divOpenDialog!=null && !jQuery(e.target).is('.ui-dialog, a') && !jQuery(e.target).closest('.ui-dialog').length ){ _closeDlg(); } } ); setTimeout(function() { g_divOpenDialog = l_d; g_divOpenDialog.dialog(); }, 500); } function _closeDlg() { jQuery('body').unbind('click'); g_divOpenDialog.dialog('close'); g_divOpenDialog.dialog('destroy'); g_divOpenDialog = null; } 

एक पेज पर पूर्वावलोकन मोडल बनाते समय मुझे एक ही समस्या थी बहुत सारे Googling के बाद मैं यह बहुत उपयोगी समाधान पाया। घटना और लक्ष्य के साथ यह जाँच रहा है कि क्लिक कहाँ हुआ और इसके आधार पर कार्रवाई को ट्रिगर किया गया है या कुछ भी नहीं।

कोड स्निपेट लाइब्रेरी साइट

 $('#modal-background').mousedown(function(e) { var clicked = $(e.target); if (clicked.is('#modal-content') || clicked.parents().is('#modal-content')) return; } else { $('#modal-background').hide(); } }); 

यह एकमात्र तरीका है जो मेरे गैर-आधुनिक संवाद के लिए मेरे लिए काम करती है

 $(document).mousedown(function(e) { var clicked = $(e.target); // get the element clicked if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) { return; // click happened within the dialog, do nothing here } else { // click was outside the dialog, so close it $('#dlg').dialog("close"); } }); 

सभी श्रेय एक्सल को जाता है
बंद करने के लिए गैर-मोडल संवाद के बाहर क्लिक करें

वास्तव में आप किसी भी प्लगइन्स की जरूरत नहीं है, बस jquery या आप इसे सरल जावास्क्रिप्ट के साथ कर सकते हैं।

 $('#dialog').on('click', function(e){ e.stopPropagation(); }); $(document.body).on('click', function(e){ master.hide(); }); 

मुझे नहीं लगता है कि पूरे डोम से $ ('। किसी भी चयनकर्ता') का उपयोग करके संवाद सामग्री ढूंढना बहुत उज्ज्वल है

प्रयत्न

 $('<div />').dialog({ open: function(event, ui){ var ins = $(this).dialog('instance'); var overlay = ins.overlay; overlay.off('click').on('click', {$dialog: $(this)}, function(event){ event.data.$dialog.dialog('close'); }); } }); 

आपको वाकई संवाद आवृत्ति से वास्तव में मिल रहा है, यह चीजें इस तरह से कभी भी गलत नहीं होगी।

निम्न कोड के साथ, आप संवाद के 'बंद' बटन पर एक क्लिक अनुकरण कर सकते हैं (अपने खुद के संवाद के लिए स्ट्रिंग 'MY_DIALOG' को परिवर्तित करें)

 $("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();