jQuery UI - Close Dialog When Clicked Outside

Sorry to drag this up after so long but I used the below. Any disadvantages? See the open function...

$("#popup").dialog({    height: 670,    width: 680,    modal: true,    autoOpen: false,    close: function(event, ui) { $('#wrap').show(); },    open: function(event, ui)     {         $('.ui-widget-overlay').bind('click', function()        {             $("#popup").dialog('close');         });     }});

Forget using another plugin:

Here are 3 methods to close a jquery UI dialog when clicking outside popin:

If the dialog is modal/has background overlay: http://jsfiddle.net/jasonday/6FGqN/

jQuery(document).ready(function() {    jQuery("#dialog").dialog({        bgiframe: true,        autoOpen: false,        height: 100,        modal: true,        open: function(){            jQuery('.ui-widget-overlay').bind('click',function(){                jQuery('#dialog').dialog('close');            })        }    });}); 

If dialog is non-modal Method 1: method 1: http://jsfiddle.net/jasonday/xpkFf/

 // Close Pop-in If the user clicks anywhere else on the page                     jQuery('body')                      .bind(                       'click',                       function(e){                        if(                         jQuery('#dialog').dialog('isOpen')                         && !jQuery(e.target).is('.ui-dialog, a')                         && !jQuery(e.target).closest('.ui-dialog').length                        ){                         jQuery('#dialog').dialog('close');                        }                       }                      );

Non-Modal dialog Method 2: http://jsfiddle.net/jasonday/eccKr/

  $(function() {            $( "#dialog" ).dialog({                autoOpen: false,                 minHeight: 100,                width: 342,                draggable: true,                resizable: false,                modal: false,                closeText: 'Close',                  open: function() {                      closedialog = 1;                      $(document).bind('click', overlayclickclose);                  },                  focus: function() {                      closedialog = 0;                  },                  close: function() {                      $(document).unbind('click');                  }        });         $('#linkID').click(function() {            $('#dialog').dialog('open');            closedialog = 0;        });         var closedialog;          function overlayclickclose() {              if (closedialog) {                  $('#dialog').dialog('close');              }              //set to one because click on dialog box sets to zero              closedialog = 1;          }  });

Check out the jQuery Outside Events plugin

Lets you do:

$field_hint.bind('clickoutside',function(){    $field_hint.dialog('close');});