jQuery Dialog close when clicked outside.

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',".ui-widget-overlay",function(e){
          //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",".ui-widget-overlay");
        // Invoke parent close method
        this._super(); 
    }
});

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