Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon?
In some cases, Jason's answer is overkill. And $('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); });
doesn't always work with dynamic content.
The solution that I find works in all cases is:
$('body').on('click','.ui-widget-overlay',function(){ $('#dialog').dialog('close'); });
A bit late but this is a solution that worked for me. Perfect if your modal is inside the overlay tag. So, the modal will close when you click anywhere outside the modal content.
HTML
<div class="modal">
<div class="overlay">
<div class="modal-content">
<p>HELLO WORLD!</p>
</div>
</div>
</div>
JS
$(document).on("click", function(event) {
if ($(event.target).has(".modal-content").length) {
$(".modal").hide();
}
});
Here is a working example
If the code of the previous posts doesn't work, give this a try:
$("a.ui-dialog-titlebar-close")[0].click();
If you'd like to do it for all dialogs throughout the site try the following code...
$.extend( $.ui.dialog.prototype.options, {
open: function() {
var dialog = this;
$('.ui-widget-overlay').bind('click', function() {
$(dialog).dialog('close');
});
}
});