CODEWITHSUNDEEP
javascriptjquerypopup
THEDert
THEDert

Reputation: 59

Modal Popup on Window Exit

Trying to figure out how to make a modal pop up on browser window exit. I know how to do an alert box, but I want to have users answer a questionnaire on exit, instead of a basic "are you sure you want to leave" alert box.

Upvotes: 0

Views: 7153

Answers (5)

Tahir77667
Tahir77667

Reputation: 2512

Here is a simple light-weight JQuery plugin that you could refer for your scenario which tracks your mouse pointer and triggers the modal as soon as the mouse moves out of the viewport: jQuery Exit Modal Plugin Example

$(window).on("unload",function() {
   alert("Handler for .unload() called");
});

NOTE: .unload() has been deprecated in version 1.8 and removed in jQuery 3.0; please 
use .on( "unload", handler ) instead of .unload( handler ).

See here : unload(handler)

Upvotes: 0

J. K.
J. K.

Reputation: 8368

window.onbeforeunload = function () {
  return 'Your content has not been properly saved yet!';
};

This will make the browser display a confirmation box like this one:

As you can see, the string returned by the function is shown in the box.

Upvotes: 2

user704988
user704988

Reputation: 436

I had similar requirements where I wanted to use nice HTML message instead of default js message. After spending some time I finally found a way to do it. I have used jQuery Colorbox modal which is very useful in any modal requirement, not just here.

Basically you can use mousemove event and find if Y coordinate (e.clientY ) is less than 5. So it will be fired every time when mouse is near address bar (user typing new URL or trying to close window).

jQuery(document).ready(function() {
jQuery(document).mousemove(function(e) {
    if (e.clientY <= 5) {
        jQuery.colorbox({initialHeight: 250, initialWidth: 250, html:'<h2>any custom HTML here</h2><br/><img src="nice-img" />'});
    }
});

});

I found many example using e.pageY but note that it will only be fired if user has not scrolled down. So if you scroll down even for 5 pixel, e.pageY will not work, but e.clientY will work. e.pageY gives offset while e.clientY gives absolute coordinate. Very important!

Upvotes: 1

shanabus
shanabus

Reputation: 13115

While it is not always recommended to put code on exit, you could do something like this:

<body onUnload="javascript:openDialog()">

or

$(document).bind('unload', openDialog);

Then:

function openDialog(e) {
    e.preventDefault();
    $("#yourQuestionnaire").dialog('open');
}

But generally it is a good practice to avoid binding to the onUnload event because its firing isn't reliable in all browsers and situations.

UPDATE

The documentation shows it as:

$(window).unload(function() {
  alert('Handler for .unload() called.');
});

This works for me when applying it via the Firefox/Firebug console on any Stackoverflow page.

Documentation here: http://api.jquery.com/unload/

Upvotes: 1

DA.
DA.

Reputation: 40697

You can't. The only way to stop the window from closing is to use the JS Confirm (or alert). If you were to just pop-up a modal in-page, the window would still close and you'd never see it. Your best bet is to open the JS alert, then redirect the page to the question. Though note that that is incredibly annoying for the user.

Upvotes: 1

Related Questions