jQuery UI 1.7.1 ओवरले पर मॉडल बंद करें

Question

मैं ओवरले क्लिक होने पर बॉक्स को बंद करने के लिए एक jQuery UI मोडल संवाद बॉक्स के डिफ़ॉल्ट व्यवहार को ओवरराइड करने का प्रयास कर रहा हूं। मेरे पास नीचे वाला कोड पहली बार खोलने के बाद डायलॉग बॉक्स बंद कर देगा और ओवरले पर क्लिक करेगा। जब मैं फिर से संवाद बॉक्स खोलता हूं, ओवरले पर क्लिक करने से कुछ भी नहीं होता है। मुझे यहां एक घटना याद आ रही है। क्या कोई यह बता सकता है कि मैं यहां क्या गलत कर रहा हूं?

धन्यवाद!

$(function(){ 

     $('#production_schedule_dialog').dialog({ 
      autoOpen: false, 
      width: 570, 
      modal: true, 
      closeOnEscape: true 
     }); 

     $('#production_schedule_dialog_link').click(function(){ 
      $('#production_schedule_dialog').dialog('open'); 
      return false; 
     }); 

     $(document).bind('click', dialogBlur); 
}); 


var dialogBlur = function(event){ 
    var target = $(event.target); 
    if (target.is('.ui-dialog') || target.parents('.ui-dialog').length) { 
     return; 
    } 

    $('.ui-dialog:visible').find('.ui-dialog-titlebar-close').trigger('click'); 

    $(document).unbind('click', dialogBlur); 
} 

Answer 1

आपके उदाहरण को देखते हुए ऐसा लगता है कि आप ईवेंट को अनबाइंड कर रहे हैं और इसे बैक अप सेट नहीं कर रहे हैं।

अपने बाँध कॉल ले जाने का प्रयास:

$('#production_schedule_dialog_link').click(function(){ 
      $('#production_schedule_dialog').dialog('open'); 
      $(document).bind('click', dialogBlur); 
      return false; 
    }); 

कि आपके कलंक श्रोता हर बार अपने संवाद को खोला जाता है rebind चाहिए।

Answer 2

मैं क्यों अपने कोड काम नहीं कर रहा यकीन नहीं है, लेकिन मैं इसे ले लिया है, इसे संशोधित, और एक संस्करण दोनों के रूप में आप काम करने के लिए लगता है कि हो गया और मैं चाहता हूँ:

var openDialogWindow = function(dialogId) 
{ 

    $(dialogId).dialog('open'); 
    $(".ui-widget-overlay").bind("click", closeDialogWindowOnOverlayClick); 
} 

var closeDialogWindowOnOverlayClick = function(event){ 
    var closeButton = $(".ui-dialog:visible").find(".ui-dialog-titlebar-close"); 
    closeButton.trigger("click"); 
    $(".ui-widget-overlay").unbind("click", closeDialogWindowOnOverlayClick); 
} 

बड़ा अंतर यहां यह है कि मैं JQuery के ओवरले ऑब्जेक्ट (दस्तावेज़ के बजाए, जैसा कि आप हैं) पर क्लिक करने के लिए संवाद-समापन तर्क को बाध्य कर रहा हूं। और जब संवाद बंद हो जाता है तो संवाद बाँधता है और इसे बाध्य करता है। वास्तव में जरूरी नहीं है, लेकिन यह चीजों को साफ रखता है।

भले ही, प्रेरणा के लिए धन्यवाद। एक

$('.ui-widget-overlay').live("click", function() { 
    //Close the dialog 
    $("#dialog").dialog("close"); 
}); 

Answer 3

इस पोस्ट में मदद मिल सकती है:

http://www.jensbits.com/2010/06/16/jquery-modal-dialog-close-on-overlay-click/

Answer 4

सबसे आसान तरीका यह करने के लिए: http://www.ryanjeffords.com/blog/entry/closing-a-jquery-ui-dialog-when-the-dialog-loses-focus

इस जोड़े सरल पुन: प्रयोज्य एक।

$('.ui-widget-overlay').live('click', function(event) 
{ 
    $(this).prev().find('div:nth-child(2)').dialog('close'); 
}); 

Answer 5

इतने सारे जटिल जवाब ... यहाँ है:

Answer 6

यदि आप jQuery के पुराने संस्करण (प्री-1.7) का उपयोग कर रहे हैं तो पॉल का समाधान ठीक काम करता है। हालांकि .live() हालांकि बहिष्कृत है। इसके बजाय on() का उपयोग करने का प्रयास करें।

$('.ui-widget-overlay').on("click", function() { 
    //Close the dialog 
    $(this).find(".dialog").dialog("close"); 
}); 

Answer 7

सबसे अच्छा तरीका यह करने के लिए:

$('body').on("click", ".ui-widget-overlay", function() { 
     $("#dialog").dialog("close"); 
    }); 

Answer 8

पेज कुछ संवाद शामिल है, तो आप इस सार्वभौमिक विधि का उपयोग कर सकते हैं:

$(document).on('click', '.ui-widget-overlay', function() { 
    var $dialog = $(this).siblings('.ui-dialog:visible') 
    .find('.ui-dialog-content'); 
    if ($dialog.length && $dialog.dialog('isOpen')) { 
    $dialog.dialog('close'); 
    } 
});