jQuery-UI cerca de diálogo modal en el fondo, haga clic en

Question

estoy jugando con jQuery UI, y me gusta cómo funciona esta demo: http://jqueryui.com/demos/dialog/#modal-message

Sin embargo, cuando un cuadro de diálogo aparece, la única manera de cerca que está haga clic en uno de los botones de la interfaz dentro del cuadro de diálogo: ¿cómo podría extender esto para cerrar un cuadro de diálogo dado cuando el usuario hace clic en la capa de fondo que cubre la página?

Vi donde los usuarios pueden presionar "escape", pero francamente no creo que la mayoría de los usuarios piensen hacer esto (no lo hice hasta que lo vi como una opción), sin embargo, podría ocurrirles hacer clic lejos del mensaje.

¿Existe un evento/opción que me falta que pueda acceder?

Answer 1

Que debe hacer el truco:

$(".ui-widget-overlay").click(function(){ 
    $(".ui-dialog-titlebar-close").trigger('click'); 
}); 

Haga clic en .ui-widget-overlay activará el clic en el botón de cierre

Saludos

G.

Answer 2

he encontrado el anterior a ser meticuloso a veces, aquí hay una solución simple:

$(".ui-widget-overlay").live('click', function(){ 
    $(".ui-dialog-titlebar-close").trigger('click'); 
}); 

Answer 3

sólo para añadir en caso de que alguien de encontrarse con este problema - si tiene varios cuadros de diálogo apilados uno encima del otro, entonces el siguiente cerrará simplemente el diálogo que está en la cima:

$(".ui-widget-overlay").live("click", function() { 
      $(".ui-dialog-titlebar-close", $(this).prev()).trigger('click'); 
     }); 

Answer 4

Este es el método preferido para usar cuando se trata de versiones más nuevas de Jquery.

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

Answer 5

Esta definitivamente va a funcionar, ya que es importante cuando la capa está en el dom o no.

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