How to trigger an exit popup?

Question

I'd like to make an exit popup on my website. I've prepared my modal but can't find "a good way" to detect a moment when a user is about to leave the website. I've read some other posts on this subject and found this piece of code:

$(document).ready(function() {
  $(document).mouseleave(function(e) {
    if(e.clientY < 0) {
      $('#exit').modal('show')
    }
  });
});

Unfortunately this solution doesn't work on IE and Edge. What's the better way of doing it?

UPDATE: Let me be more precise. I want to achieve something like this. I assumed that the best way is to detect when a mouse leaves a document.

That code basically checks to see if the mouse cursor is above the top of the document window. Is that what you're trying to do?? — Reinstate Monica Cellio, Dec 20 '16 at 20:46
Yes, it is. As I said - the result is fine, but it's doesn't work on all browsers. — always_bloo, Dec 20 '16 at 20:49
http://stackoverflow.com/questions/18068912/how-to-control-when-closing-a-window — Rudresha Parameshappa, Dec 20 '16 at 20:53

score 1 · Answer 1 · answered Dec 20 '16 at 20:46

1

Typically this is done using the onbeforeunload event on the window. This should be assigned to a function that returns the text you wish to display to the user when they are leaving the page. For example:

window.onbeforeunload = function () {
    return "Are you sure you want to leave?"
}

This will result in a confirmation window when the user tries to leave the page for any reason. If you don't want it to display on internal links, you will need to use javascript to unassign the event before the navigation occurs.

answered Dec 20 '16 at 20:46

Will P.

8,437
3
36
45

Also, this won't work in Chrome. It just keeps saying "Changes won't be saved..." – Praveen Kumar Purushothaman Dec 20 '16 at 20:49
But now I'm not able to trigger my modal, am I? – always_bloo Dec 20 '16 at 20:50
@bloo79 Yes, you can't trigger the modal. – Praveen Kumar Purushothaman Dec 20 '16 at 20:51
2

Yeah in modern browsers they show a generic string instead of the results of the function. There is unfortunately no easy way to use your own dialog to prevent the user from leaving the page (for good reason -- malicious sites used to be able to almost completely prevent users from leaving) – Will P. Dec 20 '16 at 20:52

geekzster · Answer 2 · 2016-12-20T20:55:14.457

0

window.onbeforeunload = function () {
    // do stuff with your modal here
}

do what you want inside the callback function, but the onbeforeunload event is the one you will want to handle

edited Dec 20 '16 at 20:55

answered Dec 20 '16 at 20:47

geekzster

559
8
21

This doesn't work. It shows it and closes the browser. – Praveen Kumar Purushothaman Dec 20 '16 at 20:49
1

before unload is when you're leaving the page, not moving the mouse away. – jdmdevdotnet Dec 20 '16 at 20:50
you'll want to work with whatever the #exit modal is - we don't know that from what you posted. it's just an example. – geekzster Dec 20 '16 at 20:52
@AlGoreRhythm, "before unload" is when OP said they're trying to trigger a popup. this code still won't work, but not for the reason you mentioned. – Dan O Dec 20 '16 at 20:52
I see your point, but if you look at comments `That code basically checks to see if the mouse cursor is above the top of the document window. Is that what you're trying to do??` and the OP's response `Yes, it is. As I said - the result is fine, but it's doesn't work on all browsers`. I think the OP is confused on what he wants. – jdmdevdotnet Dec 20 '16 at 20:55
@Al for the record those comments were added after (or the same time as) I posted my answer. but I agree - not sure at this point what behavior the OP wants, so we'll see – geekzster Dec 20 '16 at 21:00

How to trigger an exit popup?

2 Answers2