如何通过在模态窗口外部单击来关闭模态？

Question

在一个非常简单的jQuery模态中，我通过单击CLOSE as关闭该模态

$('#close').click(function(e) {
  e.preventDefault();
  $('#overlay, #alertModalOuter').fadeOut(400, function() {
     $(this).remove();
  });
});

如何通过单击“关闭”按钮（位于模态窗口内部）还是单击模态窗口之外的任何位置来关闭模态。

Answer 1

像这样更改您的功能应该可以：

    $('#close, #overlay').click(function(e) {
      e.preventDefault();
      $('#overlay, #alertModalOuter').fadeOut(400, function() {
      $('#close').remove();
    });
});

Answer 2

我发现添加以下内容会有所帮助：

$('.item-modal').click(function(e) {
  e.stopPropagation();
});

Answer 3

将相同的Click侦听器添加到叠加层。

Answer 4

我知道这个问题与jQuery有关，但这是我在Vue上的模态组件上执行此操作的方式，以防万一有人发现它有用。我的模式HTML基本上是直接从以下代码中提取的：https://vuejs.org/v2/examples/modal.html

我设置了两个@click属性，一个在最外面的模态元素（modal-mask）上，该属性调用我的close()方法（向父组件发出close事件），另一个在实际的模态窗口元素上（ modal-container），并使用.stop事件修饰符（@click.stop）阻止点击冒泡到父元素（modal-mask）。就像魅力一样。