如何使用同一段JS脚本实现多个按钮/链接触发同一模态弹窗

AI 小北

2026-10-5

问题根因

HTML规范中ID属性必须全局唯一，你给导航链接和英雄区按钮都用了btnPreventivo的ID，document.getElementById()只会返回页面中第一个匹配该ID的元素，因此只有导航栏的链接绑定了点击事件，其他元素没有触发逻辑。
原JS代码中windowPreventivo变量未定义，点击空白处关闭模态窗的逻辑本身就会报错，影响功能稳定性。

修复步骤

1. 调整HTML触发元素的标识

删除所有触发报价模态窗元素的重复ID，统一新增公共类名js-open-preventivo-modal，后续新增的联系类触发元素也只需加这个类即可复用逻辑：

<!-- 导航栏链接修改后 -->
<li><a href="#preventivo" class="js-open-preventivo-modal">Preventivo</a></li>

<!-- 英雄区按钮修改后 -->
<button type="button" class="js-open-preventivo-modal" >Richiedi Preventivo</button>

2. 替换为原生JS批量绑定逻辑

修改后的JS代码如下，兼容所有带公共类的触发元素，修复未定义变量问题：

const modalPreventivo = document.getElementById("modalPreventivo");
const closeBtn = document.querySelector(".closePreventivo");
// 获取所有触发模态窗的元素
const openModalBtns = document.querySelectorAll(".js-open-preventivo-modal");

// 给所有触发元素批量绑定打开事件
openModalBtns.forEach(btn => {
  btn.addEventListener("click", (e) => {
    // 阻止a链接的默认跳转行为
    e.preventDefault();
    modalPreventivo.style.display = "block";
  });
});

// 关闭按钮绑定事件
closeBtn.addEventListener("click", () => {
  modalPreventivo.style.display = "none";
});

// 点击模态窗外空白处关闭
window.addEventListener("click", (e) => {
  if (e.target === modalPreventivo) {
    modalPreventivo.style.display = "none";
  }
});