如何通过ID触发对应Modal？现有前端代码改造求助

我现有一段可切换Modal的代码，希望实现页面上不同的触发器对应触发不同内容的Modal。我知道需要使用ID来实现，但不确定如何基于当前代码完成改造，目前仍在学习阶段。

能否有人帮我修改JavaScript代码，实现按ID触发对应的Modal？我是否必须使用Bootstrap之类的框架才能实现，还是可以轻松改造现有代码？

原代码片段：

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
    

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

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}
function closeAction(){
toggleModal();
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeAction);
window.addEventListener("click", windowOnClick);

.trigger{
    font-size: 16px;
    color: #fff;
    background-color: #3b94a3;
    border-radius: 0px 4px 4px 0px;
    max-width: 350px;
    line-height: 1.4!important;
    position: absolute;
    left: 0px;
    top: 80px;
}
.trigger:hover{
    color: #fff;
    background-color: #4E4E4E;
}
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 1;
    cursor: pointer;
}
.modal-content {
    background-color: white;
    padding: 1rem 1.5rem;
    margin: 100px auto;
    width: 70%;
    cursor: default;
    position: relative;
}
.close-button {
    position: absolute;
    cursor: pointer;
    right: -40px;
    top: -10px;
    font-size: 40px;
}
.close-button:hover {
    color: darkgray;
}
.show-modal {
    z-index: 100;
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

<!--Modal 1 -->
<div id="tour" class="trigger">Take a Tour</div>
<div id="tour" class="modal">
  <div class="modal-content">
    <div class="close-button">&times;</div>
    <h3>This is tour content</h3>
  </div>
</div>
<!--Modal 2 -->
<div id="game" class="trigger">View the game</div>
<div id="game" class="modal">
  <div class="modal-content">
    <div class="close-button">&times;</div>
    <h3>This is game content</h3>
  </div>
</div>

不用依赖框架，纯原生JS就能搞定 #

你完全不需要Bootstrap这类框架，基于现有代码就能轻松改造。核心是让触发器和对应的Modal建立明确关联，同时先修正原HTML里的语法错误：同一个页面中ID不能重复，这会导致JS无法精准定位元素。

步骤1：修正HTML结构 #

把重复的ID改成关联式命名，让触发器和Modal的对应关系一目了然，比如触发器用trigger-tour，对应的Modal用modal-tour：

<!--Modal 1 -->
<div id="trigger-tour" class="trigger">Take a Tour</div>
<div id="modal-tour" class="modal">
  <div class="modal-content">
    <div class="close-button">&times;</div>
    <h3>This is tour content</h3>
  </div>
</div>
<!--Modal 2 -->
<div id="trigger-game" class="trigger">View the game</div>
<div id="modal-game" class="modal">
  <div class="modal-content">
    <div class="close-button">&times;</div>
    <h3>This is game content</h3>
  </div>
</div>

步骤2：改造JavaScript代码 #

核心思路：

1. 获取所有触发器和关闭按钮，而非仅第一个
2. 给每个触发器绑定点击事件，通过ID关联找到对应Modal并切换显示
3. 给每个关闭按钮绑定事件，关闭其所在的Modal
4. 点击Modal背景时关闭对应Modal

修改后的JS代码：

// 获取所有触发器和关闭按钮
const triggers = document.querySelectorAll(".trigger");
const closeButtons = document.querySelectorAll(".close-button");

// 切换指定Modal的显示状态
function toggleModal(targetModal) {
  targetModal.classList.toggle("show-modal");
}

// 点击触发器时，找到对应Modal并切换
triggers.forEach(trigger => {
  trigger.addEventListener("click", () => {
    // 从触发器ID提取对应Modal的ID（比如trigger-tour → modal-tour）
    const modalId = trigger.id.replace("trigger-", "modal-");
    const targetModal = document.getElementById(modalId);
    toggleModal(targetModal);
  });
});

// 点击关闭按钮时，关闭所在的Modal
closeButtons.forEach(button => {
  button.addEventListener("click", () => {
    // 向上找到最近的.modal元素
    const targetModal = button.closest(".modal");
    toggleModal(targetModal);
  });
});

// 点击Modal背景时关闭
window.addEventListener("click", (event) => {
  if (event.target.classList.contains("modal")) {
    toggleModal(event.target);
  }
});

步骤3：CSS无需修改 #

你的现有CSS已经能满足多Modal的显示需求，不需要额外调整。

改造说明 #

• 用querySelectorAll批量获取元素，解决原代码只操作第一个触发器/Modal的问题
• 通过ID命名规则建立关联，确保触发器能精准找到对应Modal
• 用closest()方法快速定位关闭按钮所属的Modal，逻辑更简洁
• 点击背景时通过类名判断，适配所有Modal的关闭需求

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