点击其他触发按钮时关闭当前激活模态框的JS实现方案

原有代码存在3个核心问题导致异常：

• 重复编写两套完全一致的模态框控制逻辑，同名openModal、closeModal函数会被后定义的版本覆盖，事件也被重复绑定，逻辑混乱
• HTML中存在两个id="overlay"的遮罩元素，DOM规范中id全局唯一，getElementById仅会匹配第一个元素，第二个按钮对应的遮罩控制完全失效
• 打开新模态框的逻辑没有预先关闭已激活的旧模态框，直接给新模态框加激活类，导致多个模态框层叠显示

1. 修正HTML结构 #

删除两个.item容器内部重复的遮罩层代码，在所有模态框结构的最外层（推荐放在</body>标签前）添加唯一的全局遮罩层：

<div id="overlay"></div>

修正后单个爪形按钮的结构示例：

<!-- 单个爪形+模态框结构 -->
<div class="item one">
  <input type="image" data-modal-target="#info1" src="paw.png" alt="Pfote" class="paw">
  <div id="info1" class="infobox eins">
    <div class="title">
      <h3 class="infoheadline">3.500 mal tierischer</h3>
      <button data-close-button class="close-button">&times;</button>
    </div>
    <div class="linesmall"></div>
    <p class="infotext">Wiesen bieten Lebensraum für rund 3.500 Tierarten – z. B. Vögel, Käfer, Spinnen, Heuschrecken, Schmetterlinge, Bienen, Hummeln ...</p>
  </div>
</div>

2. 替换原有冗余JS代码 #

删除原有分Modal One/Modal Two编写的重复逻辑，替换为统一的控制代码，核心是在打开新模态框前先关闭所有已激活的模态框：

// 统一获取DOM元素
const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

// 绑定打开按钮事件
openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const targetModal = document.querySelector(button.dataset.modalTarget)
    openModal(targetModal)
  })
})

// 点击遮罩关闭模态框
overlay.addEventListener('click', () => {
  document.querySelectorAll('.infobox.active').forEach(modal => closeModal(modal))
})

// 绑定关闭按钮事件
closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const targetModal = button.closest('.infobox')
    closeModal(targetModal)
  })
})

function openModal(targetModal) {
  if (!targetModal) return
  // 核心逻辑：打开新模态框前，先关闭所有已激活的模态框
  document.querySelectorAll('.infobox.active').forEach(modal => closeModal(modal))
  // 激活目标模态框和遮罩
  targetModal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(targetModal) {
  if (!targetModal) return
  targetModal.classList.remove('active')
  overlay.classList.remove('active')
}

• 点击任意爪形按钮时自动关闭当前已打开的模态框，仅展示当前点击对应的模态框
• 点击模态框关闭按钮、点击遮罩层均可正常关闭模态框
• 后续新增爪形按钮和对应模态框时，只需要按照现有格式添加data-modal-target属性绑定对应模态框id即可，无需额外编写JS逻辑

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