当模态弹出窗口打开时，防止移动 "Back button" 退出站点，而是关闭弹出窗口

Question

当模式弹出对话框打开时，即使我添加了一个关闭按钮（通常是右上角的 X），一些手机用户也会使用他们的手机 "Back button" 关闭弹出窗口。但是这会退出网站！

如何让手机"Back button"关闭弹窗而不是退出网站？

document.getElementById("link").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popupdarkbg").style.display = "block";
  document.getElementById("popup").style.display = "block";
    document.getElementById('popupdarkbg').onclick = function() {
      document.getElementById("popup").style.display = "none";
      document.getElementById("popupdarkbg").style.display = "none";
  };
  return false;
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

<div id="main">
<a href="" id="link">Click me</a><br>
</div>
<div id="popup">This is a popup window! Click mobile "Back button"</div>
<div id="popupdarkbg"></div>

备注：

我已经看过这个 Codepen How to disable browser back button using JavaScript，但我不确定它是否跨浏览器 Chrome、Firefox、Safari 和 Android, iOS, 等等
我已经看到关于 window.onpopstate = function () { history.go(1); }; 的答案，但我想确保这是在这里做的好习惯，（所以它不是它们的副本）。

Answer 1

以下是我在我的应用程序中的粗略版本：

var showModal = function() {
    // some code here to show the HTML elements...

    window.history.pushState('backPressed', null, null);
    window.history.pushState('dummy', null, null);
    window.addEventListener('popstate', hideModal, { once: true });
};

var hideModal = function(event) {
    if (event.state == 'backPressed') {
        // hide the HTML elements
    }
};

我添加两个虚拟状态的原因是因为 popstate 事件也会在 URL 哈希更改时触发，例如当用户在地址栏中手动覆盖哈希时。检查当前历史记录状态是否匹配 backPressed 让我验证事件确实是由“后退”按钮触发的。

Answer 2

这是我最终使用的已接受答案 (*) 的一个小变体：

window.history.pushState('popupclosed', null, null);    // initial state: closed

var hideModal = function(event) {
    if (event.state == 'popupclosed') {
        closepopup();
    }
};

var showModal = function(event) {
    if (history.state !== 'opened') {
        window.history.pushState('opened', null, null);
    }
    window.addEventListener('popstate', hideModal, { once: true });

与(*)的区别在于：

我们只在浏览器历史记录中为每个弹出窗口添加 1 个新状态，而不是 2
如果使用弹出窗口右上角的 X 按钮关闭上一个弹出窗口（但不使用 "Previous in history" 浏览器按钮或 [=30= 上的 "Back button" ])，然后打开第二个弹出窗口时，不要重新创建新的历史状态opened，因为它已经是当前状态。

当模态弹出窗口打开时，防止移动 "Back button" 退出站点，而是关闭弹出窗口

When modal popup is open, prevent mobile "Back button" to quit the site, close the popup instead

javascript

modal-dialog

back-button

responsive-design