移动端模态弹窗开启时，如何让返回键关闭弹窗而非退出网站？

嘿，这个问题我之前帮不少开发者解决过！核心原因其实是移动端返回键本质上是操作浏览器的历史记录——当你打开弹窗时，浏览器的历史栈并没有新增条目，所以按返回键就直接退到上一个页面了。下面给你一套完整的实现方案：

1. 打开弹窗时新增历史记录条目 #

当用户触发弹窗打开事件（比如点击你的#link），除了显示弹窗，还要用history.pushState()往浏览器历史栈里加一个带标识的状态。这样返回键就会先触发这个状态的弹出，而非直接退出网站。

修改你的点击事件代码：

document.getElementById("link").onclick = function(e) {
    e.preventDefault();
    // 添加带弹窗标识的历史状态
    history.pushState({popupOpen: true}, "", window.location.href);
    // 显示弹窗和遮罩层
    document.getElementById("popupdarkbg").style.display = "block";
    document.getElementById("popup").style.display = "block";
};

2. 监听popstate事件处理返回操作 #

接下来要监听浏览器的popstate事件，当用户按返回键时，检查历史状态里的弹窗标识，若存在则关闭弹窗，而非让页面跳转。

添加这段监听代码：

window.addEventListener('popstate', function(event) {
    // 判断当前弹出的状态是否是我们标记的弹窗状态
    if (event.state && event.state.popupOpen) {
        // 关闭弹窗和遮罩层
        document.getElementById("popupdarkbg").style.display = "none";
        document.getElementById("popup").style.display = "none";
        // 替换当前历史状态，避免用户再次按返回键重复触发
        history.replaceState(null, "", window.location.href);
    }
});

3. 处理弹窗手动关闭的情况 #

当用户点击弹窗的关闭按钮（比如右上角的X）时，记得要移除我们之前添加的历史状态，避免后续按返回键出现异常。

示例关闭按钮的点击事件：

document.getElementById("closePopup").onclick = function() {
    // 关闭弹窗和遮罩层
    document.getElementById("popupdarkbg").style.display = "none";
    document.getElementById("popup").style.display = "none";
    // 替换历史状态，清除弹窗标识
    history.replaceState(null, "", window.location.href);
};

关键注意点 #

• pushState的状态对象：第一个参数用来标识这个历史条目属于弹窗操作，方便后续判断；第三个参数用当前页面URL即可，不会修改地址栏显示。
• popstate事件触发时机：用户点击返回/前进按钮、调用history.back()/history.forward()时都会触发，我们通过event.state精准判断处理逻辑。
• 手动关闭弹窗必须同步处理历史状态：否则用户后续按返回键会再次打开弹窗，影响体验。

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