单页实现多个内容不同的modal弹窗 遇内容重复问题JS新手求助

问题根源 #

• HTML规范要求id属性必须全局唯一，你现在两个弹窗都用了相同的id="modal"，且所有触发按钮的data-modal-target都指向#modal，document.querySelector匹配时永远只会返回页面中第一个符合条件的弹窗，所以永远只弹出第一个的内容。
• 你的JS代码里重复绑定了两次overlay的点击事件，还有一处变量名写错（把modals写成了modal），会导致报错需要修正。
• 原有HTML中缺少overlay元素，也没有给弹窗加关闭按钮，对应的关闭逻辑无法生效。

1. 修改HTML代码 #

给每个弹窗设置独一无二的id，同时修改对应触发按钮的data-modal-target指向对应的id，补充关闭按钮和overlay元素：

<div class = "members-grid">
    <!-- 按钮指向对应唯一弹窗id -->
    <button data-modal-target = "#modal-eunbi" class = "open"><img src = "eunbi.jpg" alt = "kwon eunbi" class = "size"></button>
    <button data-modal-target = "#modal-sakura" class = "open"><img src = "sakura.jpg" alt = "miywaki sakura" class = "size"></button>
</div>

<!-- 第一个弹窗id唯一 -->
<div class = "modal" id = "modal-eunbi">
    <div class = "modal-img">
        <!-- 新增关闭按钮 -->
        <button data-close-button class="close-button">×</button>
        <img src = "eunbi.jpg" alt = "kwon eunbi" class = "modal-size">
        <ul class = "profile-info">
            <li class = "name">Kwon Eunbi</li>
            <li class = "text-style">Birthday: September 27, 1995</li>
            <li class = "text-style">Position: Leader, Main Dancer, Lead Vocalist</li>
            <li class = "text-style">Rank: 7</li>
        </ul>
    </div>
</div>
            
<!-- 第二个弹窗id唯一 -->
<div class = "modal" id = "modal-sakura">
    <div class = "modal-img">
        <button data-close-button class="close-button">×</button>
        <img src = "sakura.jpg" alt = "miyawaki sakura" class = "modal-size">
        <ul class = "profile-info">
                <li class = "name">Miyawaki Sakura</li>
                <li class = "text-style">Birthday: March 19, 1998</li>
                <li class = "text-style">Position: Sub Vocalist, Sub Rapper, Visual</li>
                <li class = "text-style">Rank: 2</li>
        </ul>
    </div>
</div>

<!-- 补充缺失的overlay元素 -->
<div id="overlay"></div>

2. 修改JS代码 #

删除重复的overlay绑定逻辑，修正变量名错误：

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 modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

// 删除了重复的绑定逻辑，修正了变量名错误
overlay.addEventListener('click', () => {
  const modals = document.querySelectorAll('.modal.active')
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal')
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove('active')
  overlay.classList.remove('active')
}

可选CSS补充 #

如果关闭按钮位置不对，可以加这段CSS调整：

.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
}

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