JS操作元素添加.hidden类实现点击模态框外部关闭功能状态检测失效问题

• 执行时机错误：if (!modal.classList.contains('hidden'))仅会在JS初始化加载时执行1次，此时模态框默认携带hidden类，判断结果永远为假，内部的事件绑定逻辑从未运行。普通if语句不会自动监听DOM类名的变化，你修改类名后不会重新触发该判断。
• 事件绑定逻辑错误：你将点击事件绑定在了modal元素上，只有点击模态框内部区域才会触发该事件，点击模态框外部的区域根本无法触发该监听，逻辑上不可能实现点击外部关闭的效果。
• 重复绑定风险：就算你把if判断挪到打开模态框的回调里，每次打开都绑定一次事件，会导致同一事件被多次绑定，触发多次关闭逻辑，出现性能问题和不可预期的bug。

直接将关闭逻辑做公共封装，分别给关闭按钮、遮罩层绑定关闭事件即可，遮罩层本身就覆盖了模态框外的所有可视区域，点击遮罩层就等价于点击模态框外部：

const modalButtons = document.querySelectorAll('.show-modal');
const modal = document.querySelector('.modal');
const closeModalBtn = document.querySelector('.close-modal');
const overlay = document.querySelector('.overlay');

// 封装关闭模态框公共逻辑，复用
const closeModal = () => {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

// 绑定打开模态框事件
modalButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
  });
});

// 点击关闭按钮关闭
closeModalBtn.addEventListener('click', closeModal);

// 点击遮罩层（模态框外区域）关闭
overlay.addEventListener('click', closeModal);

// 可选扩展：按ESC键关闭模态框，优化体验
document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});

如果你不想通过遮罩层绑定事件，要通过全局点击判断实现，可添加以下逻辑，注意要排除打开模态框的按钮点击，避免刚打开就关闭：

document.addEventListener('click', e => {
  if (
    !modal.classList.contains('hidden') 
    && !modal.contains(e.target) 
    && !e.target.classList.contains('show-modal')
  ) {
    closeModal();
  }
});

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