如何实现点击屏幕任意位置关闭Modal模态框

完整修改后代码 #

var search = $(".btn-search-button");
var close = $(".close-search");
var overlay = $(".overlay");
var modal = $(".btn-search-filter-div"); // 提取模态框容器为变量，减少重复DOM查询

// 打开按钮点击事件，新增阻止事件冒泡逻辑
search.click(function (e) {
  e.stopPropagation();
  filter_show();
});

close.click(function () {
  filter_hide();
});

// 点击全屏遮罩层触发关闭，对应点击模态框外任意区域的场景
overlay.click(function() {
  filter_hide();
});

// 阻止模态框内部点击事件冒泡，避免点击模态框内容时触发误关闭
modal.click(function(e) {
  e.stopPropagation();
});

function filter_show() {
  modal.addClass("filtered");
  overlay.show(20);
}
function filter_hide() {
  modal.removeClass("filtered");
  overlay.hide();
}

逻辑说明 #

• 原有代码里的overlay本身是全屏覆盖的遮罩层，显示时铺满整个视口，点击该区域就等价于点击模态框外的任意区域，直接绑定点击事件触发关闭即可
• 给模态框容器新增阻止事件冒泡逻辑，是为了避免点击模态框内部的按钮、输入框等内容时，事件向上冒泡到遮罩层，触发误关闭
• 给打开按钮新增阻止事件冒泡逻辑，是为了避免点击打开按钮时，事件冒泡到外层元素，导致模态框刚打开就被触发关闭的异常问题

如果你的遮罩层不是全屏覆盖样式，可以把上述overlay.click的绑定逻辑替换为全局文档点击绑定，其余逻辑保持不变即可：

$(document).click(function() {
  filter_hide();
});

内容的提问来源于stack exchange，提问作者smit kansara