Question

所以我有一些jQuery UI对话框，并且对于用户可用性我认为最好是用户能够在框外点击时关闭对话框，而不必单击对话框上的小关闭按钮。 / p>

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

但是，这将是页面上的任何单击事件，因此我们必须排除单击模式以触发此事件处理程序。看来你已经用e.preventDefault（）完成了这个，所以添加上面的代码就可以了。更好的解决方案是在模态HTML中包含模态背景，并在其上捕获单击事件。如果你提供HTML，我会给你一个例子。

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

1 个答案: