我正在尝试在浏览器窗口/选项卡关闭时打开自定义弹出窗口。
详细地说,如果用户单击浏览器窗口/选项卡关闭按钮,则会出现带有某些内容的自定义弹出窗口,或者可能有某些选项要求关闭或继续页面。
这是仅带来默认警报弹出窗口的代码:
window.onbeforeunload = function() {
var message = 'Do you want to leave this page?';
return message;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>K3logics.com</title>
<script>
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
});
$(document).mouseleave(function () {
if (mouseY < 100) {
if (popupCounter < 1) {
alert("Please do not close the tab!");
}
popupCounter ++;
}
});
</script>
</head>
<body>
<div id="page-wrap">
<span id="coordinates"></span>
<h1>Hi, Move your mouse cursor around then try to close the window of browser! - <a href="https://www.k3logics.com" target="_blank">https://www.k3logics.com</a></h1>
</div>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
我还建议你不要这样做,但毕竟你提出了一个问题,应该得到一个答案。
<script type="text/javascript">
var popit = true;
window.onbeforeunload = function() {
if(popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
该脚本将起作用(http://jsfiddle.net/SQAmG/3/),并确保它只会弹出一次(如果他决定留下一次,则不会再次打扰用户)。