点击Modal外部关闭功能异常：页面模糊且Modal无法打开的修复

问题根源 #

1. 全局点击事件直接修改popup的visibility样式，未同步移除blur的active类，导致页面持续模糊
2. 后续调用toggle()时，popup的visibility:hidden行内样式优先级高于active类的显示规则，Modal无法正常展示

修复方案 #

统一通过active类控制所有状态，避免混合使用行内样式和类样式：

修复后的JavaScript代码

// 打开/关闭Modal的统一逻辑
function toggle() {
  const blur = document.getElementById('blur');
  blur.classList.toggle('active');
  const popup = document.getElementById('popup');
  popup.classList.toggle('active');
}

// 全局点击事件：点击Modal外部时关闭
window.addEventListener("click", function(event) {
  const modal = document.getElementById('popup');
  // 仅当Modal处于激活状态，且点击的是Modal外部区域时触发关闭
  if (modal.classList.contains('active') && !modal.contains(event.target)) {
    toggle();
  }
});

配套CSS样式补充（确保状态切换生效）

/* 页面模糊效果 */
#blur.active {
  filter: blur(5px);
  pointer-events: none; /* 可选：防止模糊区域的元素被误点击 */
}

/* Modal默认隐藏状态 */
#popup {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他Modal样式：背景、 padding、边框等 */
}

/* Modal激活显示状态 */
#popup.active {
  visibility: visible;
  opacity: 1;
}

HTML代码保持不变

<!-- CONTAINER -->
<div class="container" id="blur">
  <div class="content">
    <a class="" href="#" onclick="toggle()">Open modal</a>
  </div>
</div>

<!-- MODAL -->
<div id="popup">
  <a id="close" href="#" onclick="toggle()">&times;</a>
  <div>
    <p>other contents here</p>
  </div>
</div>

修复说明 #

• 用modal.contains(event.target)精准判断点击区域，避免误触Modal内部元素时关闭弹窗
• 通过调用统一的toggle()函数，同步更新页面模糊和Modal的状态，保证两者始终一致
• 所有显示/隐藏逻辑由active类控制，彻底消除行内样式和类样式的冲突问题

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