当模式弹出对话框打开时，即使我添加关闭按钮（通常是右上角的 X），移动设备上的一些用户也会使用移动设备的“后退按钮”来关闭弹出窗口。但这将退出该网站！
如何让手机“后退按钮”关闭弹窗而不是退出网站？
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>
Notes:
我已经看过这个 Codepen如何使用 JavaScript 禁用浏览器后退按钮 https://codepen.io/dhavalt10/pen/rGLBzB，但我不确定它是否可以在 Chrome、Firefox、Safari 以及 Android、iOS 等上跨浏览器。
我已经看过有关的答案window.onpopstate = function () { history.go(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让我验证该事件确实是由“后退”按钮触发的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
