Question

在一个非常简单的jQuery模式中，我通过单击CLOSE as

来关闭模态

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

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

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

将相同的点击监听器添加到叠加层。

Answer 4

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

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

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

4 个答案: