Skip to main content
 首页 » 编程设计

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

2026年10月07日5kevingrace

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

详细来说,如果用户单击浏览器窗口/选项卡关闭按钮,将出现一个自定义弹出窗口,其中包含一些内容,或者可能有一些选项要求关闭或继续页面。

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

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

请您参考如下方法:

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