在框外單擊鼠標，關閉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，我將舉一個例子。