open a custom popup on browser window/tab close

Question

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

No no, don't do this, it's a horrible user experience. Users expect a tab to get closed if they click to close it, showing a message reminds of spammy websites. — elclanrs, Oct 09 '13 at 04:40
thanks for your valuable words... but for the time being I want to achieve it for a important reason. — Mufeed, Oct 09 '13 at 04:59

score 8 · Answer 1 · answered Nov 13 '18 at 12:50

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

this script works fine. but what if when closed, the popup will not appear again until clear cache — Yohanes Christian, Aug 20 '21 at 03:33

Rafael Herscovici · Answer 2 · 2022-01-31T17:41:06.757

6

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

edited Jan 31 '22 at 17:41

answered Oct 09 '13 at 04:42

Rafael Herscovici

16,558
19
65
93

http://jsfiddle.net/SQAmG/5/ See this now you will understand better.., may be couldn't explain properly. need this popup visible at the time of closing instead of that default alert message. – Mufeed Oct 10 '13 at 11:21
You can't use your own dialog to override the default one, This question has already been asked, and got a good answer http://stackoverflow.com/questions/6063522/jquery-beforeunload/6065085#6065085 – Rafael Herscovici Oct 10 '13 at 15:20
Is this answer is working in 2021? I checked both jsfiddle and both are not displaying the popup and my tab got closed. – user9437856 Jan 13 '21 at 10:18
can i show a modal ?if yes, how? – Rohan Devaki Jan 31 '22 at 12:29

score 2 · Answer 3 · answered Oct 02 '19 at 23:04

2

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

answered Oct 02 '19 at 23:04

Gabriela Suarez Carvajal

41
3

score 1 · Answer 4 · answered Oct 09 '13 at 06:41

1

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

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


};

jsFiddle

answered Oct 09 '13 at 06:41

Hardik Sondagar

4,347
3
28
48

Its not really what I am asking??? looks like same as I tried. But really thanks for time. – Mufeed Oct 10 '13 at 10:59
http://jsfiddle.net/SQAmG/5/ See this now you will understand better.., may be couldn't explain properly. need this popup visible at the time of closing instead of that default alert message. – Mufeed Oct 10 '13 at 11:24

score 0 · Answer 5 · answered Oct 09 '13 at 04:46

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

if i put anything inside window.onbeforeunload = function() { //all you can do is provide a message.. doesn't work and close the window by clicking the default alert — Mufeed, Oct 09 '13 at 06:01

score -7 · Answer 6 · answered Oct 09 '13 at 04:41

-7

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

answered Oct 09 '13 at 04:41

Praveen

55,303
33
133
164

open a custom popup on browser window/tab close

6 Answers6

Linked

Related