Question

当打开模态弹出对话框时，即使我添加了一个关闭按钮（通常是右上角的X），移动设备上的一些用户也会使用他们的移动＆＃34;后退按钮＆＃34;关闭弹出窗口。但相反，这将退出网站！

如何制作手机＆＃34;后退按钮＆＃34;关闭弹出窗口而不是退出网站？

＆＃13;

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;
}

＆＃13;

#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; }

＆＃13;

<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>

＆＃13;

注意：

我已经看过这个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右上角按钮关闭（但未使用＆＃34;历史记录中的上一个＆＃34;浏览器按钮或＆＃34;后退按钮＆＃34;在电话上），然后在打开第二个弹出窗口时，不要重新创建新的历史状态opened，因为它已经是当前状态。

当模态弹出窗口打开时，请阻止移动＆＃34;后退按钮＆＃34;退出网站，关闭弹出窗口

2 个答案: