Close Dialog box when click outside

Question

I've already read a lot od asnwer about how to close a jquery dialog box, but I can't get any of the solutions posted work.

Here's my code.

function openPopUp(element){
var a = element;
var dialog = $("#methods").dialog( {
                autoOpen: false,
                modal: true,
                draggable: false,
                resizable: false,
                open: function() { 
                        $(".ui-dialog-titlebar-close").hide(); 
            //THIS IS THE SOLUTION THAT I CAN'T GET TO WORK
            $('.ui-widget-overlay').bind('click', function() {
                                          $('#methods').dialog('close');
                    })
            }
});

//open dialog
    dialog.dialog('open');

//set dialog position
    $( "#methods" ).dialog( 
                "option", 
                "position", 
                { 
                    my: "left bottom", 
                    at: "left bottom", 
                    of: a 
                }
           );
          }

and I call this function from an onclick event from my HTML code

onclick="openPopUp(this);"

I think that I'm missunderstanding something really important about Dialog box, can anybody help me?

One main problem could be that my .ui-widget-overlay div has no dimension inside my page.

Answer 1

function openPopUp(element){
var a = element;
$("#methods").dialog( {
                autoOpen: false,
                modal: true,
                draggable: false,
                resizable: false,
                open: function( event, ui ){ 
                 $(".ui-dialog-titlebar-close").hide(); 
                 //THIS IS THE SOLUTION THAT I CAN'T GET TO WORK
                 $(document).on('click','.ui-widget-overlay', function() {
                             $('#methods').dialog('close');
                  });
               }
           });

         }