在框外单击鼠标，关闭jQuery UI对话框

Question

因此，我有一些jQuery UI对话框，为了用户的可用性，我认为最好是用户在框外单击时能够关闭对话框，而不必单击对话框上的小关闭按钮。

jQuery代码：

$(document).ready(function() { 
 var dlg=$('#createTeam').dialog({
     title: 'Create a Team',
     resizable: true,
     autoOpen:false,
     modal: true,
     hide: 'fade',
     width:600,
     height:285,
     clickOutside: true, // clicking outside the dialog will close it
     clickOutsideTrigger: "#addEngineer",
     close: function(event, ui) {
              location.reload();
         }
  });


  $('#createTeamLink').click(function(e) {
      dlg.load('admin/addTeam.php');
      e.preventDefault();
      dlg.dialog('open');
  }); 
}); 

任何人都可以建议我需要添加到上面的代码中，以便在框外单击鼠标时关闭对话框吗？

Answer 1

虽然我可以提供一个简单的解决方法，但我不确定为什么clickOutside：true属性无法正常工作。 在包含模式的页面上，您可以捕获主体点击事件，如下所示：

$(document).click(function() {
    dlg.dialog('close');
});

但是，这将是页面上的ANY click事件，因此我们必须从触发此事件处理程序中排除对模式的单击。 看来您已经使用e.preventDefault（）完成了此操作，因此添加上面的代码即可。 更好的解决方案是在模式HTML中包含模式背景，并捕获其上的点击事件。 如果您提供HTML，我将举一个例子。