当用户打开站点时，他可以单击登录按钮，然后以模式查看登录表单。但是当用户点击后退浏览器按钮时，他会返回上一页。如果前一页是开始浏览器页面，他返回开始浏览器页面。
当用户点击浏览器后退按钮时，是否可以只隐藏模式而没有任何额外的警报？
当用户触摸手机上的返回按钮时，也可以隐藏此模式？(我只是在谈论手机底部的 Android 手机上存在的按钮，它将用户返回到上一个窗口/屏幕)
现场使用的 PHP 和 JS 代码。
非常感谢任何帮助
最佳答案
您想要的可能选项很多，但我将尝试为您提供一个相对简单的 JS 代码示例。对于这个例子，我使用了 Bootstrap Modal。
此代码的工作原理:
当您按下浏览器上的后退按钮时，该函数会搜索打开的模式窗口。
当模态元素打开时，有类 modal fade show .如果代码中存在具有这些类的元素，则执行下一步。
在下一步中，该函数查找“关闭”按钮并单击它。 “关闭”按钮具有类 btn btn-secondary此代码适用于台式机和移动设备。关闭模式窗口后，返回按钮返回正常操作。
我希望我有帮助
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
function back_Button() {
history.pushState(null, null);
window.addEventListener('popstate', () => {
// Add here the classes of the MODAL as they look when it is open
var x = document.getElementsByClassName('modal fade show')[0];
if (x) {
// Add here the classes of target Close Button
var z = x.getElementsByClassName('btn btn-secondary')[0];
z.click();
history.pushState(null, null);
} else {
window.history.back();
}
});
}
back_Button();
</script>
</body>
</html>
关于javascript - 单击浏览器后退按钮时隐藏模态窗口(模态框)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64832109/