如何将弹窗窗口的JavaScript函数通用化？

通用化弹窗实现方案 #

方案1：封装通用函数 #

把重复的打开/关闭逻辑抽成通用函数，新增弹窗时只需传入对应元素即可，无需重复编写函数：

// 全局遮罩层（假设页面只有一个遮罩）
const overlay = document.getElementById("overlay");

// 通用打开弹窗函数
function openPopup(popupElement) {
    popupElement.classList.add("open-popup");
    overlay.classList.add("overlay");
}

// 通用关闭弹窗函数
function closePopup(popupElement) {
    popupElement.classList.remove("open-popup");
    overlay.classList.remove("overlay");
}

// 使用示例
const popup1 = document.getElementById("popup-1");
const popup2 = document.getElementById("popup-2");

// 给按钮绑定事件
document.querySelector("#open-popup1-btn").addEventListener("click", () => openPopup(popup1));
document.querySelector("#close-popup1-btn").addEventListener("click", () => closePopup(popup1));

document.querySelector("#open-popup2-btn").addEventListener("click", () => openPopup(popup2));
document.querySelector("#close-popup2-btn").addEventListener("click", () => closePopup(popup2));

方案2：事件委托（零JS新增成本） #

如果弹窗和触发按钮遵循统一命名规则，用事件委托可以做到新增弹窗只写HTML，不用改JS：

HTML结构示例

<!-- 打开按钮通过data属性关联弹窗ID -->
<button data-popup-target="popup-1">打开弹窗1</button>
<div id="popup-1" class="popup">
    <button class="close-btn">关闭</button>
    <!-- 弹窗内容 -->
</div>

<button data-popup-target="popup-2">打开弹窗2</button>
<div id="popup-2" class="popup">
    <button class="close-btn">关闭</button>
    <!-- 弹窗内容 -->
</div>

<div id="overlay"></div>

JS代码

const overlay = document.getElementById("overlay");

// 处理弹窗打开事件
document.addEventListener("click", (e) => {
    const targetPopupId = e.target.dataset.popupTarget;
    if (targetPopupId) {
        const popup = document.getElementById(targetPopupId);
        popup.classList.add("open-popup");
        overlay.classList.add("overlay");
    }
});

// 处理弹窗关闭事件（关闭按钮+遮罩层）
document.addEventListener("click", (e) => {
    // 点击关闭按钮
    if (e.target.classList.contains("close-btn")) {
        const popup = e.target.closest(".popup");
        popup.classList.remove("open-popup");
        overlay.classList.remove("overlay");
    }
    // 点击遮罩层关闭
    if (e.target === overlay) {
        const activePopup = document.querySelector(".open-popup");
        activePopup?.classList.remove("open-popup");
        overlay.classList.remove("overlay");
    }
});

方案3：类封装（适合复杂场景） #

如果弹窗需要扩展动画、回调等复杂逻辑，用类封装更易维护：

class Popup {
    constructor(popupId) {
        this.popup = document.getElementById(popupId);
        this.overlay = document.getElementById("overlay");
        this.bindCloseEvent();
    }

    open() {
        this.popup.classList.add("open-popup");
        this.overlay.classList.add("overlay");
    }

    close() {
        this.popup.classList.remove("open-popup");
        this.overlay.classList.remove("overlay");
    }

    bindCloseEvent() {
        const closeBtn = this.popup.querySelector(".close-btn");
        closeBtn?.addEventListener("click", () => this.close());
    }
}

// 使用示例
const popup1 = new Popup("popup-1");
const popup2 = new Popup("popup-2");

document.querySelector("#open-popup1-btn").addEventListener("click", () => popup1.open());
document.querySelector("#open-popup2-btn").addEventListener("click", () => popup2.open());

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