Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery-UI close modal dialog on background click

I'm toying with jQuery UI, and I like how this demo works: http://jqueryui.com/demos/dialog/#modal-message

However, when a dialog comes up, the only way to close it is to click one of the interface buttons inside the dialog - how could I extend this to close any/a given dialog when the user clicks on the background layer covering up the page?

I saw where users can hit "escape", but frankly I don't think most users will think to do this (I didn't until I saw it as an option), however it might occur to them to click away from the message.

Is there an event/option I'm missing that I can tap into?

like image 717
Jane Panda Avatar asked Jan 04 '11 17:01

Jane Panda


3 Answers

That should do the trick:

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

Click on .ui-widget-overlay will trigger the click on the close button

Cheers

G.

like image 139
Greg Avatar answered Nov 09 '22 23:11

Greg


I've found the previous to be finicky at times, here's a simple fix:

$(".ui-widget-overlay").live('click', function(){
   $(".ui-dialog-titlebar-close").trigger('click');
});
like image 14
KidCache Avatar answered Nov 10 '22 00:11

KidCache


This one will definitely work, since it matters when the overlay is in the dom or not.

$(document).on('click', '.ui-widget-overlay', function(){
  $(".ui-dialog-titlebar-close").trigger('click');
});
like image 13
Ian Davis Avatar answered Nov 10 '22 00:11

Ian Davis