如何用3个不同按钮打开同一个模态窗口？

问题场景 #

需通过多个不同按钮触发同一个模态窗口，避免为每个按钮编写重复脚本，实现代码复用与逻辑统一。

步骤1：统一HTML按钮触发属性 #

将所有打开模态框的按钮统一使用相同的data-*属性，便于批量选择元素：

<!-- 统一使用data-buy-modal-open属性标记所有触发按钮 -->
<button class="buy-now__button" data-buy-modal-open type="button">Buy now
  <svg width="32" height="32" class="buy-now__icon">
    <use href="./images/svg/icons.svg#icon-ep-arrow"></use>
  </svg>
</button>
<button class="header-nav__button" data-buy-modal-open type="button">Buy now
  <svg width="32" height="32" class="header-nav__icon">
    <use href="./images/svg/icons.svg#icon-ep-arrow"></use>
  </svg>
</button>

<div class="buy-modal__container is-hidden" data-buy-modal>
  <div class="buy-modal">
    <button class="buy-modal__button buy-modal__button--close" type="button" data-buy-modal-close>
      <svg width="20" height="20">
        <use href="./images/svg/icons.svg#icon-close"></use>
      </svg>
    </button>
    <h2 class="buy-modal__title">Buy now</h2>
    <ul class="buy-modal__picture-list"></ul>
  </div>
</div>

步骤2：优化JavaScript代码 #

使用querySelectorAll选中所有触发按钮，通过遍历为每个按钮绑定点击事件，复用同一模态框切换逻辑：

(() => {
    const refs = {
        // 选中所有带有data-buy-modal-open属性的按钮
        openBuyModalBtns: document.querySelectorAll("[data-buy-modal-open]"),
        closeBuyModalBtn: document.querySelector("[data-buy-modal-close]"),
        buyModal: document.querySelector("[data-buy-modal]"),
        body: document.querySelector("body"),
    };

    // 遍历所有触发按钮，绑定模态框切换事件
    refs.openBuyModalBtns.forEach(btn => {
        btn.addEventListener("click", toggleModal);
    });
    refs.closeBuyModalBtn.addEventListener("click", toggleModal);

    function toggleModal() {
        refs.buyModal.classList.toggle("is-hidden");
        refs.body.classList.toggle("no-scroll");
    }
})();

核心优化点 #

• 用querySelectorAll替代querySelector，一次性选中所有触发按钮，避免重复编写事件绑定代码。
• 统一按钮的data属性标识，确保选择器精准匹配所有触发元素，后续新增按钮只需添加相同属性即可生效。
• 复用同一个toggleModal函数，实现模态框显示/隐藏逻辑的统一，降低维护成本。

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