Click outside non-modal dialog to close

Question

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");
});

Boundless

a few other methods I implemented - somewhat similar: https://mcmap.net/q/183218/-close-dialog-on-click-anywhere – Houk

Answer 1

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");
    }
});

http://jsfiddle.net/elwayman02/Z5KA2/

Boundless

neat! tryied a bunch of other solutions and only this one worked! – Staal

This was really helpful. Thanks! – Vardhamana