单击外部时关闭对话框

Question

我已经阅读了很多关于如何关闭jquery对话框的信息，但我无法获得任何解决方案。

这是我的代码。

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

我从我的HTML代码

中的onclick事件中调用此函数

onclick="openPopUp(this);"

我认为我很难理解对话框中真正重要的事情，有人可以帮助我吗？

一个主要问题可能是我的.ui-widget-overlay div在我的页面中没有维度。

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

         }