Come chiudere una finestra di dialogo modale dell'interfaccia utente jQuery facendo clic all'esterno dell'area coperta dalla casella?

Question

Sto usando jQuery 1.6 e jQuery UI. Ho implementato con successo una finestra modal dialog la cui larghezza è quasi il 50% della larghezza della pagina Web della mia applicazione. Vorrei dare all'utente un altro modo per chiudere la finestra di dialogo in modo che quando fa clic all'esterno dell'area coperta dalla "casella modale", questa verrà chiusa come se l'utente avesse fatto clic su " "" x "standard in alto a destra.

Come posso farlo?

Answer 1

Per chiarire, la risposta di Victor funziona solo se la finestra è impostato su autoOpen: true, il valore predefinito della finestra di dialogo, e non si apre la finestra di dialogo di nuovo con un evento. Se si apre la finestra di dialogo con un evento come click in qualsiasi momento se autoOpen è impostato su true o false, è necessario utilizzare jQuery.live.

Fiddle dimostrando il fallimento di sovrapposizione click evento con autoOpen: false: http://jsfiddle.net/GKfZM/

Fiddle dimostrando come live opere con autoOpen: false e con click evento: http://jsfiddle.net/GKfZM/1/

Sommario: risposta Victor funziona solo in determinate condizioni.

Tutorial link

Answer 2

Aggiornamento

questa è stata la prima risposta:

$(".ui-widget-overlay").click (function() { 
    $("#your-dialog-id").dialog("close"); 
}); 

Questa è la soluzione di lavoro:

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

Answer 3

Che ne dite di questo modo, in questo modo è possibile chiudere la finestra di qualunque esso aperto da dove e quale ID. E 'una funzione globale:

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

Answer 4

Sono disponibili due opzioni per la finestra di box model vicino

$('#your-dialog-id').modal('toggle'); 

O

è possibile utilizzare direttamente l'evento click quando si fa clic scatola esterna

$("#your-dialog-id .close").click()