JavaScript 实现同页面多次调用独立弹出层

顾星河

发布时间：2026-10-14 | 5人浏览过

原创

在处理复杂的网页交互时，往往需要在同一页面内呈现多个独立的提示窗口或模态框。本教程将演示如何使用纯 JavaScript（原生 JS）编写一套通用且可复用的弹出层脚本，解决同页面多次调用、互不干扰的问题。

核心思路与结构

要实现多个独立的弹出层，关键在于为每个弹窗容器赋予唯一的标识符（如 id），并分别为其绑定对应的打开和关闭函数。我们可以利用一个轻量级的工具对象来统一处理浏览器兼容性的事件监听，从而简化代码逻辑。

第一步：构建 HTML 结构与样式

首先，我们需要定义两个或多个弹窗的 HTML 容器。以下是一个包含头部（标题/关闭按钮）、主体内容（表单或文本）以及底部区域的典型结构。

设置外层容器： 定义一个类名为 popbox 的区域，用于定位和布局。
创建弹窗主体： 使用 div.pop 包裹整个弹窗，并为其设置唯一的 ID（例如 pop 和 pop2）。初始状态下，弹窗应通过 display: none; 隐藏。
添加触发元素： 在每个容器外部放置一个链接或按钮，点击时将触发对应弹窗的显示函数。

<!-- 第一个弹出层 -->
<div class="popbox">
    <div id="pop" class="pop" style="display: none">
        <div class="border">
            <div class="pop_head">
                <a href="javascript:void(0);" onclick="hide('pop')"></a>
            </div>
            <div class="pop_body">
                <p>这里是第一个弹窗的内容</p>
            </div>
        </div>
    </div>
    <!-- 触发按钮 -->
    <a href="javascript:void(0);" onclick="show('pop')" class="popdiv">点击打开第1个</a>
</div>

<!-- 第二个弹出层 -->
<div class="popbox">
    <div id="pop2" class="pop" style="display: none">
        <div class="border">
             <div class="pop_body">
                <p>这里是第二个弹窗的内容</p>
            </div>
        </div>
    </div>
    <a href="javascript:void(0);" onclick="show('pop2')" class="popdiv">点击打开第2个</a>
</div>

第二步：编写 CSS 美化界面

为了让弹窗以绝对定位的方式覆盖在页面上，并为各个部分提供基础样式，请将以下 CSS 加入 <style> 标签或外部样式表中。

<style type="text/css">
/* 重置基础样式 */
* { font-size: 14px; font-family: Verdana, Geneva, sans-serif; line-height: 1.6; margin: 0; padding: 0; box-sizing: border-box; }

/* 弹窗主容器：绝对定位居中 */
.pop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 240px;
    background: #fff;
    border: 1px solid #DDD;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

/* 边框装饰 */
.border { border: solid 1px #8e8e8e; height: 100%; width: 100%; }

/* 头部样式 */
.pop_head { height: 30px; background: #f7f7f7; border-bottom: 1px solid #eee; }
.pop_head a { float: right; margin: 5px 10px; cursor: pointer; color: #999; }

/* 主体内容区 */
.pop_body { padding: 15px; min-height: 150px; overflow-y: auto; }

/* 触发按钮样式 */
.popdiv { display: block; margin: 10px; padding: 5px 10px; background: #039; color: white; text-decoration: none; cursor: pointer; }
</style>

第三步：实现 JavaScript 控制逻辑

这是最关键的部分。我们定义一个名为 EX 的工具对象来处理事件监听，确保在不同浏览器下表现一致。接着编写通用的 show 和 hide 函数。

事件监听工具： 封装 addEvent 和 removeEvent，自动适配现代浏览器的 addEventListener 和旧版 IE 的 attachEvent。
阻止冒泡： 当用户点击弹窗内部时，不应立即触发全局的“点击空白处关闭”逻辑，因此需要调用 EX.stop 方法停止事件传播。
显示与隐藏：
- show(id): 获取指定 ID 的元素，将其 style.display 设为 ''（即块级显示）。同时，延迟绑定一个全局点击事件到 document 上，指向相应的 hide 函数。
- hide(id): 获取指定 ID 的元素，将其 style.display 设为 'none'。同时移除之前绑定的全局点击事件，防止内存泄漏或冲突。

<script type="text/javascript">
// 1. 定义事件处理工具集
var EX = {
    addEvent: function (k, v) {
        var me = this;
        if (me.addEventListener) me.addEventListener(k, v, false);
        else if (me.attachEvent) me.attachEvent("on" + k, v);
        else me["on" + k] = v;
    },
    removeEvent: function (k, v) {
        var me = this;
        if (me.removeEventListener) me.removeEventListener(k, v, false);
        else if (me.detachEvent) me.detachEvent("on" + k, v);
        else me["on" + k] = null;
    },
    // 阻止事件冒泡
    stop: function (evt) {
        evt = evt || window.event;
        if(evt.stopPropagation) evt.stopPropagation();
        else if(window.event) evt.cancelBubble = true;
    }
};

// 2. 为所有弹窗内部点击添加阻止冒泡行为
var popEls = document.getElementsByClassName('pop');
for(var i=0; i<popEls.length; i++){
    popEls[i].onclick = EX.stop;
}

// 3. 通用显示函数
function show(id) {
    var o = document.getElementById(id);
    if(o) {
        o.style.display = ""; // 显示
        // 绑定全局点击关闭事件
        setTimeout(function () { 
            EX.addEvent.call(document, 'click', function handler() {
                hide(id);
                EX.removeEvent.call(document, 'click', handler);
            });
        }, 0);
    }
}

// 4. 通用隐藏函数
function hide(id) {
    var o = document.getElementById(id);
    if(o) {
        o.style.display = "none"; // 隐藏
    }
}
</script>