多模态弹窗功能正常但关闭时控制台报TypeError错误求修正

错误根源 #

你将img[data-modal]和span.close合并到同一个imageButtons集合中，并绑定了相同的点击事件逻辑。当点击关闭按钮时，事件处理函数会先执行closeModals()，随后尝试调用openModals(a.dataset.modal)——但关闭按钮没有data-modal属性，a.dataset.modal返回undefined，document.getElementById(undefined)会得到null，访问null.style就触发了Cannot read properties of null (reading 'style')错误。

修正后的代码 #

// 拆分获取触发弹窗的图片与关闭按钮
const modalTriggers = document.querySelectorAll('img[data-modal]');
const closeButtons = document.querySelectorAll('span.close');
const modals = document.querySelectorAll('.modal');

function openModal(id) {
  const modal = document.getElementById(id);
  // 增加空值校验，避免无效ID导致的错误
  if (modal) {
    modal.style.display = 'block';
  }
}

function closeAllModals() {
  modals.forEach(modal => {
    modal.style.display = 'none';
  });
}

// 为图片绑定弹窗打开逻辑
modalTriggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    closeAllModals();
    openModal(trigger.dataset.modal);
  });
});

// 为关闭按钮绑定弹窗关闭逻辑
closeButtons.forEach(btn => {
  btn.addEventListener('click', closeAllModals);
});

关键修正点 #

• 拆分元素选择器：将触发弹窗的图片和关闭按钮分开处理，避免事件逻辑混乱
• 增加空值判断：在openModal函数中校验目标弹窗是否存在，即使传入无效ID也不会抛出错误
• 分离事件逻辑：关闭按钮仅执行关闭所有弹窗的操作，不再触发打开弹窗的逻辑

内容的提问来源于stack exchange，提问作者Ridho Nurbagja Gumelar