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

在一个非常简单的jQuery模式中，我通过单击closeas关闭该模式

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

---

如何通过单击关闭按钮（位于模式窗口内）或单击模式窗口外的任何位置来关闭模式。

将相同的单击侦听器添加到覆盖中。

这样更改功能应该可以：

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

---

我发现包括以下内容很有帮助：

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

---

我知道这个问题与jQuery有关，但下面是我在Vue中如何在模态组件上解决这个问题的，以防有人发现它有帮助。我的模式HTML基本上是直接从以下内容中提取的：

我设置了两个

@click

属性，一个在调用我的

close（）

方法（向父组件发出

close

事件）的最外面的模态元素（

modal mask

）上，另一个在实际模态窗口元素（

modal container

）上，使用

.stop

事件修饰符（

@click.stop

）以阻止单击冒泡到父元素（

模态掩码

）。工作起来很有魅力。

在

#overlay

元素上绑定相同的内容。您犯了一个错误“#close#overlay”表示id为close的元素，后跟id为overflow的元素，您的意思是“#close，#overlay”