open a custom popup on browser window/tab close

前端未结

关注

 6  792

忘掉有多难

I am trying to open a custom popup on browser window/tab close.

In details if a user clicks on the browser window/tab close button a custom popup will appear with s

相关标签:

6条回答

遇见更好的自我

2020-12-02 01:10

On october 2019 it's possible just in internet explorer https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

0 讨论(0)
发布评论:

提交评论
- 加载中...

遥遥无期

2020-12-02 01:12

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

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


};

jsFiddle

0 讨论(0)

孤城傲影

2020-12-02 01:19
The feature you're talking about is the window.onbeforeunload event, and unfortunately the only way it can be customized is to provide a custom string message for the user, because the potential for abuse is so high.

The api reference over at msdn for Internet Explorer states:
```
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.
```
I take this to mean the dialog itself cannot be altered, all you can do is provide an additional context-specific message. I cant locate the same reference for Chrome, but it seems to be the same story there.
```
window.onbeforeunload = function() {
    //all you can do is provide a message..
    return "you have unsaved changes, if you leave they will be lost";
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
暖寄归人

2020-12-02 01:20
i would also suggest you dont do this, but after all, you asked a question and deserve an answer.
```
<script type="text/javascript">
     var popit = true;
     window.onbeforeunload = function() { 
          if(popit == true) {
               popit = false;
               return "Are you sure you want to leave?"; 
          }
     }
</script>
```
this script will work (http://jsfiddle.net/SQAmG/3/) and will make sure that it will only popup once (to not bother the user again if he decided to stay once).
0 讨论(0)
发布评论:

提交评论
- 加载中...
野性不改

2020-12-02 01:20

If you're open to use jQuery UI, then you can use Dialog. Simple and look attractive.

0 讨论(0)
发布评论:

提交评论
- 加载中...

南笙

2020-12-02 01:27

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

0 讨论(0)