如何用JavaScript激活多个模态框，复用现有类与函数

不新增代码是否可行？ #

不行。原代码里的document.querySelector()只会抓取页面中第一个匹配类名的元素，第二个触发按钮、模态框和关闭按钮完全没被绑定事件，自然无法触发。

最少代码修改方案 #

只需要修改JavaScript部分，核心是批量获取元素并绑定对应关系，不需要改动HTML和CSS：

/* Modal Box Js */
const triggers = document.querySelectorAll(".trigger");

function toggleModal(targetModal) {
    targetModal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target.classList.contains("modal")) {
        toggleModal(event.target);
    }
}

// 给每个触发按钮绑定对应模态框的事件
triggers.forEach(trigger => {
    // 找到当前触发按钮对应的模态框（HTML结构中trigger紧跟modal）
    const modal = trigger.nextElementSibling;
    // 触发按钮点击事件
    trigger.addEventListener("click", () => toggleModal(modal));
    // 对应模态框的关闭按钮事件
    modal.querySelector(".close-button").addEventListener("click", () => toggleModal(modal));
});

window.addEventListener("click", windowOnClick);

关键改动点： #

• 用querySelectorAll替代querySelector，获取所有触发按钮
• 利用HTML结构中trigger和modal的相邻关系，通过nextElementSibling精准匹配对应模态框
• 让toggleModal接收目标模态框参数，避免操作错误元素
• 点击遮罩层时，直接判断目标元素是否为模态框，触发对应关闭逻辑

这样修改后，不管你加多少个同结构的模态框，都能正常触发。

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