jQuery UI 1.7.1 Modal Close su overlay Fare clic su

Question

Sto tentando di ignorare il comportamento predefinito di una finestra di dialogo modale dell'interfaccia utente jQuery per chiudere la finestra quando si fa clic sull'overlay. Il codice che ho qui sotto chiuderà la finestra di dialogo dopo averlo aperto per la prima volta e fare clic sull'overlay. Quando apro di nuovo la finestra di dialogo, fare clic sulla sovrapposizione non fa nulla. Mi manca un evento qui. Qualcuno può far notare cosa sto facendo male qui?

Grazie!

$(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

guardando il tuo esempio sembra che tu stia disancorando l'evento e non lo ripristini.

provare a spostare la chiamata bind:

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

che dovrebbe associare nuovamente il vostro ascoltatore sfocatura ogni volta che il dialogo è aperto.

Answer 2

io non so perché il codice non funziona, ma l'ho preso, modificato, e ottenuto una versione che sembra funzionare come voi e che voglio:

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); 
} 

La principale differenza ecco che sto vincolando la logica di chiusura della finestra di dialogo ai clic sull'oggetto di sovrapposizione di JQuery (invece del documento, così come sei). E faccio il binding quando la finestra di dialogo si apre e lo si disfa quando si chiude la finestra di dialogo. Non è veramente necessario, ma mantiene le cose pulite.

In ogni caso, grazie per l'ispirazione.

Answer 3

Questo post può aiutare:

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

Answer 4

modo più semplice per farlo: http://www.ryanjeffords.com/blog/entry/closing-a-jquery-ui-dialog-when-the-dialog-loses-focus

Aggiungi questa:

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

Answer 5

così tante risposte complicate ... ecco un semplice riutilizzabile.

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

Answer 6

La soluzione di Paul funziona bene se si utilizza una vecchia versione di jQuery (pre-1.7). Ora .live() è deprecato però. Prova a utilizzare on() invece.

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

Answer 7

modo migliore per farlo:

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

Answer 8

Se pagina contiene alcune finestre di dialogo, è possibile utilizzare questo metodo universale:

$(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'); 
    } 
});