Per my previous research, I've been able to figure out how to trigger a live click event on the overlay around a dialog to close the dialog. However, that restricts further development of this dialog feature to being modal. If I set the dialog to non-modal, there is no overlay to trigger the click event. How can I set up the dialog (which is now not modal) to close when I click outside it without using the overlay click event?
Here is my dialog and the subsequent live click event that allows me to close the dialog from the overlay:
$("#dialog-search").dialog({
resizable: false,
height:dimensionData.height,
width: dimensionData.width,
modal: false,
title: dimensionData.title,
position: [x,y],
close: function(event, ui){
callBack(event,ui);
}
});
$('.ui-widget-overlay').live('click', function() {
$('#dialog-search').dialog("close");
});
Finally figured out the answer to my own question. By binding a mousedown event to the document itself and then excluding the dialog, we can duplicate the functionality of the live function for overlays. Below the code I've included a jsFiddle demonstrating the solution.
// Listen for document click to close non-modal dialog
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('#dlg').dialog("close");
}
});