点击模态窗口外部如何关闭模态窗口？

Question

在一个非常简单的jQuery模态框中，我通过点击“CLOSE”来关闭模态框

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

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

- Googlebot

---

将相同的绑定绑定到＃overlay元素上。 - user971401

Answer 1

将您的函数更改为以下内容应该可以正常工作：

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

- Rich O'Kelly

---

你犯了一个错误，"#close #overlay" 的意思是 id 为 #close 的元素后面跟着 id 为 #overlay 的元素，你的意思应该是 "#close, #overlay"。 - Stefaan Colman

Answer 2

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

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

- Ryan Charmley

Answer 3

将相同的点击监听器添加到您的覆盖层。

- Stefaan Colman

Answer 4

我知道这个问题涉及到jQuery，但是以下是我在Vue中对我的模态组件所做的操作，以防有人发现它有用。我的模态HTML基本上是直接从这里提取的：https://v2.vuejs.org/v2/examples/modal.html

我设置了两个@click属性，一个在最外层的模态元素(modal-mask)上调用我的close()方法(该方法会向父组件发出close事件)，另一个在实际的模态窗口元素(modal-container)上使用.stop事件修饰符(@click.stop)来阻止点击冒泡到父元素(modal-mask)。非常好用。

- z-money