HTML <dialog>标签多模态框仅能打开第一个的JS实现问题

你的代码存在3个核心问题，导致只有第一个模态框能正常打开：

• document.querySelector()只会返回匹配选择器的第一个DOM元素，所以你定义的modal、closeModal变量始终只对应第一个模态框和它的关闭按钮，后面两个模态框完全没被获取到
• document.querySelectorAll(".open-button")返回的是包含所有打开按钮的NodeList集合，集合本身没有addEventListener方法，你直接给集合绑定事件本身就是无效写法
• 现有逻辑没有做「打开按钮-对应模态框-对应关闭按钮」的关联映射，就算事件绑定正常，也无法精准触发对应模态框

按照你当前的HTML结构（打开按钮和对应模态框按顺序相邻排列），直接替换原有JS代码即可：

// 获取所有打开按钮、所有模态框元素
const openButtons = document.querySelectorAll(".open-button");
const modals = document.querySelectorAll(".modal");

// 遍历给每一组模态框绑定事件
openButtons.forEach((openBtn, orderIndex) => {
  // 按排列顺序匹配对应模态框
  const currentModal = modals[orderIndex];
  const currentCloseBtn = currentModal.querySelector(".close-button");

  // 绑定打开事件
  openBtn.addEventListener("click", () => {
    currentModal.showModal();
  });

  // 绑定关闭事件
  currentCloseBtn.addEventListener("click", () => {
    currentModal.close();
  });
});

如果后续你会调整HTML结构、增减模态框，不依赖元素排列顺序的写法更稳妥：

1. 先微调HTML，给每个模态框加唯一id，打开按钮加data-target属性绑定对应模态框id：

<!-- MODAL 1 示例，其余两个模态框按同样规则加id和data-target即可 -->
<button class="button open-button" data-target="modal-1">
    click here
</button>
<dialog class="modal" id="modal-1">
    <h4 class="modal__title">Modal 1</h4>
    <button class="button close-button">X</button>
</dialog>

2. 对应JS逻辑：

document.querySelectorAll(".open-button").forEach(openBtn => {
  // 通过按钮上的data-target属性找到对应要打开的模态框
  const targetModal = document.getElementById(openBtn.dataset.target);
  const closeBtn = targetModal.querySelector(".close-button");

  openBtn.addEventListener("click", () => targetModal.showModal());
  closeBtn.addEventListener("click", () => targetModal.close());
});

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