Pages: 1 2
Demonstration can be seen here.
Sample code can be downloaded here.
Full Example Code
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Exit Pop Demo</title>
<script type="text/javascript" src="jquery13.js"></script>
<script src="fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.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 */ }
$(document).ready(function() {
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'showCloseButton': false
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
</script>
</head>
<body>
<p>This page is an exit-pop demostration.</p>
<div style="display: none;">
<a id="trigger" href="#popup"> </a>
<div id="popup" style="width: 250px; height: 400px;">
<p>This would be an aweber form.</p>
</div>
</div>
</body>
</html>iFrame Example
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Exit Pop Demo</title>
<script type="text/javascript" src="jquery13.js"></script>
<script src="fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.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 */ }
$(document).ready(function() {
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'frameWidth': 600,
'frameHeight': 400,
'hideOnContentClick': false,
'showCloseButton': false
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
</script>
</head>
<body>
<p>This page is an exit-pop demostration.</p>
<div style="display: none;">
<a id="trigger" href="anotherpage-on-your-site.php"> </a>
</div>
</body>
</html>Pages: 1 2
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.