In this tutorial I’m going to show you how to create an exit popup that has been tested in Internet Explorer 8, FireFox 3, Chrome and Safari 4 (Opera currently does not support the onbeforeunload event).
Traditionally to cause an exit popup you would simply reference a Javascript function in the body tag of your page such as this:
<body onunload="SomeFunction()">
Unfortunately this no longer works as most modern browsers will simply continue to the new destination or close, even if the function has executed. To work with modern browsers you need to assign a function to the OnBeforeUnload prompting the user to stay on the page.
Basic Confirmation Dialog
If you wish to simply ask the user if they wish to leave you can easily assign a function to the OnBeforeUnload directive. This method will prompt the user every time they attempt to navigate away from the page or close the window.
<script type="text/javascript"> window.onbeforeunload = function() { return "Are you sure you want to leave?"; } </script>
You may want to ensure that the popup does not occur again such as when they decided to stay on the page. You can do this by making a small modification to your code to alter to the behavior after the dialog is prompted.
<script type="text/javascript"> var popit = true; window.onbeforeunload = function() { if(popit == true) { popit = false; return "Are you sure you want to leave?"; } } </script>
The above will turn off the popup trigger after the first time the beforeunload event occurs. If the function does not return anything the browser will not prompt the user.
Using JQuery
Sometimes you may want to take some more control over your popup behavior. For example with the above methods, even clicking an internal link on your page will cause the popup to activate. This can be a major turn off to a potential buyer who has opted to continue to the sales page only to be bugged by the dialog. To fix this we can use JQuery.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function PopIt() { return "Are you sure you want to leave?"; } function UnPopIt() { /* nothing to return */ } $(document).ready(function() { window.onbeforeunload = PopIt; $("a").click(function(){ window.onbeforeunload = UnPopIt; }); }); </script>
What I did above was create two new functions. One of them executes the popup action and the other does… nothing. We assign the PopIt() function to the onbeforeunload event. However when any anchors, identified by the $(“a”) selector is triggered by a click event, the event is instead assigned to UnPopIt() thus allowing the user to click to their destination without interruptions.
Getting Fancy
So now that we know how to prompt the user to stay on the page, we need to actually do something to capture their participation. Perhaps you would like to offer them the option of signing up for a mailing list for other offers, or maybe entice them with a special deal since the original offer probably did not appeal to them.
We could trigger a popup window, but most browsers have popup blockers built in. We could however utilize some more JQuery goodness and use some Ajax to pop up an internal javascript dialog which is not normally blocked by popup blockers. For this we will use FancyBox a popular JQuery based lightbox script which can be downloaded here.
Fancybox can popup a number of different contents such as images, html code, flash videos as well as iframes. For this example we’ll popup an aweber form to collect the user’s information for a mailing list.
First we’ll want to download Fancybox and add it to our existing code:
<script type="text/javascript" src="jquery.js"></script> <script src="/fancybox/fancybox.js" type="text/javascript"></script> <link rel="stylesheet" href="/fancybox/fancybox.css" type="text/css" media="screen"/> ...
Next we will want to create the html dialog for our popup window, you can simply use aweber’s javascript loader.
<div style="display: none;"> <a id="trigger" href="#aweber"> </a> <div id="aweber" style="width: 250px; height: 400px;"> <script type="text/javascript" src="http://forms.aweber.com/form/90/1930283.js"></script> </div> </div>
You’ll notice we also added an anchor with a target the same name as the div’s ID, and that the div we created. Also the div we’ve created is also set to be invisible to the user. The anchor that has been created will act as the trigger for Fancybox. The above code can be placed just before the </body> tag of your site.
Next we need to update our javascript code to trigger the fancybox when the exitpop is initialized.
<script type="text/javascript" src="jquery.js"></script> <script src="/fancybox/fancybox.js" type="text/javascript"></script> <link rel="stylesheet" href="/fancybox/fancybox.css" type="text/css" media="screen"/> <script type="text/javascript"> function PopIt() { $("a.trigger").trigger('click'); window.onbeforeunload = UnPopIt; return "Would you like to join our mailing list for other offers?"; } function UnPopIt() { /* nothing to return */ } window.onbeforeunload = PopIt; $(document).ready(function() { $("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; }); $("a#trigger").fancybox({ 'hideOnContentClick': false, 'showCloseButton': false }); }); </script>
In the fancybox initialization noted by $(“a#trigger”).fancybox() you can define various attributes of the popup, such as the dimensions (you can match this to your aweber form, with some margin). I’ve also decided to make sure that the popup does not disappear on click and that the close button was not visible. Also we modified the click trigger for anchors in general not to include the trigger so that our fancybox trigger can execute normally.
So there you have it, with the above, when a user attempts to navigate away from your page, the popup dialog will prompt the user on whether or not they’d like to stay (the nice part is most people tend to click ‘ok’ or ‘continue’ when it’s the ‘cancel’ button that allows them to leave). Upon clicking ok, the fancybox popup will trigger showing the aweber form that they can fill out.
On the next page you can see some full-source examples as well as a demonstration and download link.
Thank you for your post on A Working Exit Popup. This is exactly what I was looking for.
hi,
is there a way to bypass the Alert Msg window ” are u sure u want to …” and just show the Fancybox pop up instead?
seems like its an unnecessary extra step to take.
*time sensitive issue*
thanks!
artur
The popup “are you sure” is there as a security measure by the browser, currently without finding an exploit existing in a browser (which no doubt would get patched quickly) there is no way to bypass that dialog.
Great script – What would the script be to launch the exit pop that contains a site on another server, ie yahoo.com
Just what i needed! very good article!
Wanted to know if its possible to change the alert box buttons text??
I want to change the ‘Stay on Page’ to something else.
thanks!
Fantastic post, but here is the challenge – how can you modify this script so it could be placed on every page and ONLY trigger when they are closing the browser or leaving your DOMAIN? I want to prompt for feedback from a small % of all users who abandon to learn more and need a way to only pop if they do, in fact, abandon.
That is why there was the anchor trigger, it can be adapted to for other forms of triggers to turn off the popup since there’s no way for javascript to know closing browser vs link taking them away from the page.
And as far as ‘every page’ goes, you’ll likely just have to include the script via php or whatever server-sided language you use on every page.
Is it possible to tell javascript:
“if the visitor is going to these pages, don’t use the popup” ??
Thanks, nice post!
If you noticed the anchor event does an UnPopIt() , likewise you would just apply that change to events where needed.