¿Cómo cerrar un cuadro de diálogo modal de jQuery UI haciendo clic fuera del área cubierta por el cuadro?

Question

Estoy usando jQuery 1.6 y jQuery UI. Implementé con éxito una ventana modal dialog cuyo ancho es casi el 50% del ancho de la página web de mi aplicación. Me gustaría dar al usuario otra forma de cerrar el cuadro de diálogo para que cuando haga clic fuera del área cubierta en la página por el "cuadro modal", este se cierre como si el usuario hiciera clic en " estándar "" x "botón en la parte superior derecha de eso.

¿Cómo puedo hacer eso?

Answer 1

Para aclarar, la respuesta de Victor sólo funciona si el cuadro de diálogo se establece en autoOpen: true, el valor predeterminado del cuadro de diálogo, y no abre el cuadro de diálogo nuevamente con un evento. Si abre el cuadro de diálogo con un evento como click en cualquier punto si autoOpen está configurado en true o false, entonces tiene que usar jQuery.live.

violín que demuestra el fracaso de la superposición click evento con autoOpen: false: http://jsfiddle.net/GKfZM/

violín que demuestra cómo live obras con autoOpen: false y con click evento: http://jsfiddle.net/GKfZM/1/

Resumen: Respuesta de Victor solo funciona bajo ciertas condiciones.

Tutorial link

Answer 2

actualización

Esta era la respuesta inicial:

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

Esta es la solución de trabajo:

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

Answer 3

¿Qué hay de esta manera, de esta manera se puede cerrar el diálogo lo que sea abierta desde dónde y qué ID. Es una función global:

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

Answer 4

Usted tiene dos opciones para el cuadro de diálogo modelo cerca

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

O

que puede utilizar el evento click directamente al hacer clic fuera de la caja

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