Question

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

详细说明，如果用户点击浏览器窗口/选项卡关闭按钮，将显示包含某些内容的自定义弹出窗口，或者可能有某些选项要求关闭或继续该页面。

这里是只带来默认警报弹出的代码：

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

Answer 1

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

<script type="text/javascript">
     var popit = true;
     window.onbeforeunload = function() { 
          if(popit == true) {
               popit = false;
               return "Are you sure you want to leave?"; 
          }
     }
</script>

此脚本将有效（http://jsfiddle.net/SQAmG/3/）并确保它只会弹出一次（如果他决定留一次，不要再打扰用户）。

Answer 2

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

Answer 3

您正在谈论的功能是window.onbeforeunload事件，不幸的是，它可以自定义的唯一方法是为用户提供自定义字符串消息，因为滥用的可能性非常高。

Internet Explorer的msdn上的api引用声明：

The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.

我认为这意味着对话框本身无法更改，您所能做的就是提供额外的特定于上下文的消息。我无法找到Chrome的相同参考，但它似乎是相同的故事。

window.onbeforeunload = function() {
    //all you can do is provide a message..
    return "you have unsaved changes, if you leave they will be lost";
}

Answer 4

window.onbeforeunload = function (e) 
{
    e = e || window.event;

        e.returnValue = 'You want to leave ? ';


};

jsFiddle

Answer 5

2019年10月，可能仅在Internet Explorer中 https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

Answer 6

如果您打开使用jQuery UI，则可以使用Dialog。简单而有吸引力。

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

6 个答案: