jQuery Dialog close when clicked outside without modal

by Bipen Chhetri

HTML

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

JavaScript

//extend jQuery Dialog widget.
$.widget("ui.dialog", $.ui.dialog, {
    // customize open method to register the click
    open: function () {
        var me = this;
        $(document).on('click', function (e) {
            if ($(e.target).closest($(me.uiDialog)).length === 0) {

                //call dialog close function
                me.close();
            }
        });

        // Invoke parent open method
        this._super();
    },
    close: function () {
        // Remove click handler for the current .ui-widget-overlay
        $(document).off("click");
        // Invoke parent close method
        this._super();
    }
});

$("#dialog").dialog({
   //modal: true
});