CODEWITHSUNDEEP
javascriptjquery
Mufeed
Mufeed

Reputation: 187

open a custom popup on browser window/tab close

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 some content or may be having some option asking to close or continue the page.

here is the code which only bring the default alert popup:

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

Upvotes: 6

Views: 59122

Answers (6)

Rafael Herscovici
Rafael Herscovici

Reputation: 17094

i would also suggest you dont do this, However, you asked a question and deserve an answer.

UPDATE (2022) This code does not work anymore due to new browser security settings.

var popit = true;
window.onbeforeunload = function() {
  if (popit == true) {
    popit = false;
    return "Are you sure you want to leave?";
  }
}

Upvotes: 6

Gabriela Suarez Carvajal
Gabriela Suarez Carvajal

Reputation: 61

enter image description here

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

Upvotes: 3

Kamlesh
Kamlesh

Reputation: 6135

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

Upvotes: 8

Hardik Sondagar
Hardik Sondagar

Reputation: 4495

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

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


};

jsFiddle

Upvotes: 1

Neel
Neel

Reputation: 11721

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";
}

Upvotes: 0

Praveen
Praveen

Reputation: 56501

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

Upvotes: -7

Related Questions