本文教你用原生 javascript 实现多模态框按需触发：无需 bootstrap，只需为每个触发按钮和对应模态框设置唯一 id，并通过 css 选择器精准绑定事件，轻松实现“一个按钮打开一个专属内容”的交互效果。

本文教你用原生 javascript 实现多模态框按需触发：无需 bootstrap，只需为每个触发按钮和对应模态框设置唯一 id，并通过 css 选择器精准绑定事件，轻松实现“一个按钮打开一个专属内容”的交互效果。

要让多个按钮分别打开各自对应的模态框，核心在于解除全局单例绑定——你当前代码中 document.querySelector(".modal") 总是获取第一个 .modal 元素，导致所有触发器都操作同一个模态框。解决方案是：为每个模态框及其触发器分配唯一 ID，并在点击时动态定位目标模态框。

✅ 正确的 HTML 结构（修复重复 ID 问题）

首先，修正原始 HTML 中的 ID 冲突（同一页面不能有多个相同 ID）：

<!-- Modal 1 -->
<button id="trigger-tour" class="trigger">Take a Tour</button>
<div id="modal-tour" class="modal">
  <div class="modal-content">
    <span class="close-button">×</span>
    <h3>This is tour content</h3>
  </div>
</div>

<!-- Modal 2 -->
<button id="trigger-game" class="trigger">View the game</button>
<div id="modal-game" class="modal">
  <div class="modal-content">
    <span class="close-button">×</span>
    <h3>This is game content</h3>
  </div>
</div>

⚠️ 注意：

不推荐作为可点击按钮（语义化与可访问性不佳），改用 更佳；同时确保每个 id 全局唯一（如 modal-tour、modal-game）。

✅ 改进后的 JavaScript（支持多模态框）

// 通用模态框控制函数：接收目标模态框元素
function toggleModal(modalElement) {
  if (modalElement) {
    modalElement.classList.toggle("show-modal");
  }
}

// 点击遮罩层关闭（仅关闭当前激活的模态框）
function windowOnClick(event) {
  // 检查点击目标是否为「正在显示」的模态框本身（非内部内容）
  const openModals = document.querySelectorAll('.modal.show-modal');
  openModals.forEach(modal => {
    if (event.target === modal) {
      toggleModal(modal);
    }
  });
}

// 绑定每个触发器到对应模态框
document.querySelectorAll('.trigger').forEach(trigger => {
  const modalId = trigger.id.replace('trigger-', 'modal-'); // 如 trigger-tour → modal-tour
  const targetModal = document.getElementById(modalId);

  if (targetModal) {
    trigger.addEventListener('click', () => toggleModal(targetModal));

    // 为每个模态框内的关闭按钮绑定事件
    const closeBtn = targetModal.querySelector('.close-button');
    if (closeBtn) {
      closeBtn.addEventListener('click', () => toggleModal(targetModal));
    }
  }
});

// 全局点击关闭监听（只作用于已打开的模态框）
window.addEventListener('click', windowOnClick);

✅ 关键优化点说明

• 动态 ID 映射：利用命名约定（如 trigger-tour ↔ modal-tour）自动关联触发器与模态框，避免硬编码多个事件监听器；
• 解耦逻辑：toggleModal() 接收具体 DOM 元素，不再依赖全局变量，可复用性强；
• 安全关闭逻辑：windowOnClick 只对当前已显示（含 show-modal 类）的模态框生效，防止误关其他模态框；
• 可扩展性：新增模态框时，只需添加一对 id="trigger-xxx" / id="modal-xxx" 的元素，JS 自动识别并绑定，无需修改脚本。

? 小贴士：增强用户体验

• 添加键盘支持（如按 Esc 关闭当前模态框）：

  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') {
      document.querySelectorAll('.modal.show-modal').forEach(m => toggleModal(m));
    }
  });

• 为 .modal-content 添加 tabindex="0" 并聚焦，提升键盘导航体验；
• 使用 aria-hidden 和 aria-modal="true" 增强屏幕阅读器支持。

这样，你就能用纯原生 JS 实现灵活、可维护、无障碍友好的多模态框系统——无需引入任何框架，代码清晰且易于拓展。