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

Posted 2023-05-08

【中文标题】在框外单击鼠标时关闭 jQuery UI 对话框

【英文标题】：Close jQuery UI Dialog on mouse click outside of box

【发布时间】：2016-01-20 17:03:15

【问题描述】：

所以我有一些 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');
  ); 
); 

谁能建议我需要在上面的代码中添加什么内容才能在框外单击鼠标时关闭对话框？

【问题讨论】：

jQuery UI - Close Dialog When Clicked Outside的可能重复

【参考方案1】：

我不确定为什么 clickOutside : true 属性不起作用，尽管我可以提供一个简单的解决方法。在带有模态的页面上，您可以像这样捕获正文单击事件：

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

但是，这将是页面上的任何点击事件，因此我们必须排除点击模式触发此事件处理程序。但是，您似乎已经使用 e.preventDefault() 完成了此操作，因此添加上面的代码，它应该可以工作。更好的解决方案是在模态 html 中包含模态背景，并在其上捕获点击事件。如果你提供你的 HTML，我会给你一个例子。