在浏览器窗口/选项卡关闭上打开自定义弹出窗口

Muf*_*eed 6 javascript jquery

我正在尝试在浏览器窗口/选项卡关闭时打开自定义弹出窗口。

详细地说,如果用户单击浏览器窗口/选项卡关闭按钮,则会出现带有某些内容的自定义弹出窗口,或者可能有某些选项要求关闭或继续页面。

这是仅带来默认警报弹出窗口的代码:

window.onbeforeunload = function() {
              var message = 'Do you want to leave this page?';
              return message;
          }
Run Code Online (Sandbox Code Playgroud)

Kam*_*esh 8

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


Dem*_*tic 5

我还建议你不要这样做,但毕竟你提出了一个问题,应该得到一个答案。

<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/),并确保它只会弹出一次(如果他决定留下一次,则不会再次打扰用户)。


Pra*_*een -7

如果您愿意使用 jQuery UI,那么您可以使用Dialog。简单又看起来很有吸引力。