Easy Javascript/AJAX Exit Pop up script – Creates div overlay on page exit







Update 1-28-2012 – Works! Fixed Chrome Image Issue – It is now working in All Browsers

So the other day a client requested that when a visitor leaves any page on the site, they be greeted by an alert (such as ‘alert(‘this is your alert’);’) and if they click ‘Cancel’ they then go to an alternate ‘Exit Pop’ page that acts as a last ditch effort page to salvage a sale, or an opt-in, or dignity, what have you. Otherwise they just click ‘OK’ and go on their merry way in the opposite direction.

Usually I would just grab code from another page that I had done something similar on, but If you have ever dealt with old code before, You have either forgotten exactly what you needed to change in order for it to work ‘out of the box’ for your new situation, so you end up wasting about 10 minutes testing to get it right.

So I decided to streamline the process once and for all!

I had searched around the Googleverse for a similar simple script, but could not find an easy to use one that was contained in basically one easy to use file that did not include a kitchen sink of un-needed features.

I will try to explain my code. So here we go:

First, the page you want the action to happen on, in our case, is index.php

This is the only important bit of code needed on that page.

<script type="text/javascript" src="scripts/as_exitPop.js">
/***********************************************

http://andysowards.com

------------------------------------------
* Easy Javascript/PHP Exit Pop up script @ AndySowards.com Developer's Blog (www.andysowards.com)
* This notice MUST stay intact for legal use
* Visit @andysowards at http://www.andysowards.com/ for full updated source code
***********************************************/
</script>

This is of course the code that includes the .js file(which will do all of our work) and will of course preserve my copyright information(which is creative commons, so basically you can do whatever you want with it, but please give me credit for it.). I usually place this code before the ending tag, but I have not tried it in the head code. Give me feedback if you try it that way!

Next is the actual .js file, which is called ‘as_exitPop.js’ and is located in the ‘scripts’ folder:

//EDIT HERE ONLY

var ExitPopURL = 'http://www.andysowards.com/dev/exitpop/exit.php'; //This is the URL where your 'exit page' is located.

/* NOTE: If you experience an error it is most likely due to the strict AJAX security, make sure that you are accessing the correct URL, for example, if you have http://domain.com in your browser, and http://www.domain.com in the 'ExitPopURL' then there will be a conflict. they must both match. .htaccess to ensure that your visitors are visiting www. is good practice here.*/

var AlertBox = "*****************************************************\n\nWait! Stop! Don't Go!\n\nBefore leaving, please leave a comment on the \n\nscript post and share your suggestions.\n\nThanks for visiting AndySowards.com.\n\nAndy \n\n*****************************************************";

// This is what the alert() pop up verbage says.

//DO NOT EDIT BELOW This LINE (Unless of course your Savvy!) ------------------------------

There is more to this .js file of course, but for the moment, this is all you really need to worry about.

First you see a var called ‘ExitPopURL’ and Hopefully is self explanitory to what it is. all you have to do is edit this in the .js file to be the url that points to your ‘exit pop’ page. Which means this is the page that will be seen if the user chooses to give you a ‘second chance’.

Second, you see a variable called ‘AlertBox’, Again, hopefully self explanitory, but this is the variable that contains the text that will be seen in the javascript pop up alert box. You can change this to any verbage you would like.

Now for the next bit of code:

window.onload = function(){
// this is where we start our journey...
createExitPop();
}// end function onunload

What is happening here is that the createExitPop(); function(which is declared next) is running when the browser first loads the page. So basically when the page loads, your exit pop is hiding, like a tiger, waiting for someone to try and leave.

Next is your basic AJAX function, I will not explain this here because there are countless references and explanations of AJAX elsewhere:

function ajaxGET(divId, page, effect)
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(effect == 'collapse') { document.getElementById(divId).style.display='none'; }
else { document.getElementById(divId).innerHTML=xmlHttp.responseText; }
}
}
xmlHttp.open("GET",page,true);
xmlHttp.send(null);
}

Next, Lets declare that createExitPop function:

function createExitPop()
{
var theBody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
newdiv.setAttribute('id','ExitDiv');
theBody.setAttribute('id','body');
newdiv.setAttribute('style', 'width: 100%; height: 100%;');

// put div on page
theBody.appendChild(newdiv);

//add exit pop to page (contents are from your exit.php(or whatever you named it) page)
document.getElementById('ExitDiv').value = ajaxGET('ExitDiv', ExitPopURL);

// style exit pop to resemble its own page
document.getElementById('ExitDiv').style.display = "none";
document.getElementById('ExitDiv').style.top = '0px';
document.getElementById('ExitDiv').style.left = '0px';
document.getElementById('ExitDiv').style.position = 'relative';
document.getElementById('ExitDiv').style.backgroundColor = '#FFFFFF';

}// end createExitPop

Here we are taking the body tag, assigning it to the ‘theBody’ variable and then setting an attribute to reference it, in this case we are setting the id of ‘body’.

Then we are creating a whole new div and calling the variable holding it ‘newdiv’. We then do the same thing with the new div that we did with the body tag, and add an attribute, an id of ‘ExitDiv’.
We also set some styles for our new div, in this case we set the width and height.

We then append the new div child to the body of the document. Once our new ‘ExitDiv’ is in the document, we can reference it using the DOM. We are using AJAX to inject our ‘exit.php’ contents into the div using the variable ‘ExitPopURL’ as the reference for content.

We then just add some styles and customize our ExitDiv.

We are almost done, Here is where the magic happens!

isExit = true;

function ExitPop(isExit) {
if(isExit != false) {
isExit=false;
isPop = true;

var bodyTag = document.getElementById? document.getElementsByTagName("BODY")[0] : document.body;

// add id="body" so that it can be referenced.
bodyTag.setAttribute("id", "body");

//replace body text with exit pop
bodyTag.innerHTML = document.getElementById('ExitDiv').innerHTML;
return AlertBox;
} // end if
}// end function

window.onbeforeunload = function(){

// Lay down an exit pop!!
return ExitPop(isExit);

}// end function onunload

Here we set the variable ‘isExit’ to true. Why? Because if they try to do anything other than access an ‘isExit=false’ tagged link or form, then they are trying to leave the page! And we cant have that now can we? Of course not.

Inside the ExitPop function its parameter is the ‘isExit’ variable, it is evaluating whether or not it is true or false. If true, then the function replaces whatever is in the body tag with the inner HTML of the ExitDiv, which in turn makes the page have the content of your ‘exit.php’ page. An alert then pops up asking the user what they want to do, and you select the copy that goes in there using the ‘AlertBox’ variable.

Then, with the magic of the window.onbeforeunload method, before the window loads another page, it calls our ExitPop function and references the current state of the ‘isExit’ Variable.

Once the alert pops up, If they choose ‘OK’ they go. If they choose ‘Cancel’ they stay. Simple right?

Lastly, the only thing left is to make your ‘exit.php’ page look however you want! and the page will replace the with whatever is in your ‘exit.php’ file, and of course you can name the ‘exit.php’ file whatever you want.

One last note, if you have navigational links on your page that need to NOT trigger the exit pop functionality, simply add this attribute to the link ‘onClick=”isExit = false;”‘ or if you are using a form, then it would be ‘onSubmit=”isExit = false;”‘ and you should sneak past the security and on to the desired page :).

Hope you enjoy this and it helps save you time or make you money, and if you run into any trouble or have suggestions on making it better, let me know and I will implement the good ones!

For a Live Demo Example Click Here.

To download the original source code click here Easy Javascript/AJAX Exit Pop up script

Did this script help you? Donate to make it even better!










Was this helpfull? Want to Buy Me A Beer?

This script has received a LOT of feedback, Thanks everyone! in order to keep it up to date and make it even better, your donations are appreciated!!

* Please contact me if you would like to pay me for a custom script to meet your needs or help on your current or future Web Development project.

Please note: you have to have web hosting for this technique to work, some free sites like Myspace or similar do not allow the use of javascript. If you want to host your site yourself and use this technique to capture leads, then you can pickup some cheap web hosting and set it up.

If you like this, You'll love These.



About the Author

Andy Sowards

Andy Sowards

Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design/Development community and a Serial Blogger. follow me on Twitter @AndySowards



107 Responses to “Easy Javascript/AJAX Exit Pop up script – Creates div overlay on page exit”

  1. aLVARO

    hI guys!
    I’m using this scrip but I made some little changes.

    var ExitPopURL = escape(url); //This is the URL where your ‘exit page’ is located.
    var redirectPage = escape(redirect); — I add this var.

    I change the redirect page to other.
    and I found, after this function:

    xmlHttp.onreadystatechange = function () {

    if (xmlHttp.readyState == 4) {
    if (effect == ‘collapse’) { document.getElementById(divId).style.display = ‘none’; }
    else {

    document.getElementById(divId).innerHTML = xmlHttp.responseText;
    //eval(document.getElementById(divId).innerTEXT);
    }
    }
    }
    xmlHttp.open(“GET”, redirectPage, true);
    xmlHttp.send(null);
    }

    the javascript inside my web page “redirectPage” doesn’t work…..

    I hope you can help me I have been researching without results
    from now thanks a lot.

    Reply
  2. Jay

    Hi Andy,

    I used this code about a year ago and it worked fine. Implementing it again and it works fine on FireFox 18.0.1 but not on IE 9 or Chrome 24.0.1312.57 m.

    On both IE and Chrome, I get the exit popup but the exit page only partially loads (background image only).

    With IE 9, I get an error message as follows:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
    Timestamp: Tue, 5 Feb 2013 16:23:08 UTC

    Message: Access is denied.

    Line: 75
    Char: 6
    Code: 0
    URI: scripts/as_exitPop.js

    Any help appreciated as I’m well & truly stuck…

    Reply
  3. Jeff

    Image does not load for me, just a rectangle.
    Chrome: Version 23.0.1271.95 m

    Reply
  4. Adam

    Hello Andy,

    I am working on getting your script running. Everything seems to be working fine with exception to the following.

    Upon exit, the page which we are exiting (which has an mp4 video loaded on it) somehow remains active in the background and the mp4 file continues to play.

    Is there a fix for this?

    Thank you very much,
    Adam

    Reply
  5. Joecifer

    In Chrome & Safari, the image of the beer glass does not load on the exit pop. Both just show a blank rectangle where the image should appear.

    I’m having the same problem on a page I’m working on. Any ideas as to why Chrome and Safari are blocking the images?

    Reply
  6. Ali

    I don’t know why but when I try to run this on my web page I get the alert box but the div doesn’t load the exit pop up page in the background it’ just completely black

    Reply
  7. Omar Martin

    Hi Andy. Great Script.

    Can it work on a .html page or does the index have to be a .php?
    It (kinda) works on my html page but the exit page images all break in chrome. :(

    Omar

    Reply
    • Andy Sowards

      Hey Omar how are you!? Yes it can work on any page .htm .html .php .asp whatever – its all javascript :)

      Also there is a fix to the chrome issue if you read my last comment – I need to update the .zip file but haven’t had any time to do it, will update it asap if u can’t get the fix implemented in my last comment – thanks for the support!

      Reply
  8. Andy Sowards

    Hey Guys, I fixed this to where it works in all browsers, I need to update the download files still – but for right now make this change to the .js file

    change this:

    //replace body text with exit pop
    bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
    document.getElementById(‘ExitDiv’).style.display = “block”;

    to this:

    //replace body text with exit pop
    //bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
    document.getElementById(‘ExitDiv’).style.display = “block”;

    var oldContent = getSiblings(document.getElementById(‘ExitDiv’));
    for(i in oldContent ){
    oldContent[i].style.display = “none”;
    }

    Reply
    • Kris

      Andy,

      The updated code is not working because getSiblings is not defined.

      Reply
    • Kris

      In fact, I was able to fix it this way:

      1. Define getSiblings:

      function getChildren(n, skipMe){
      var r = [];
      var elem = null;
      for ( ; n; n = n.nextSibling )
      if ( n.nodeType == 1 && n != skipMe)
      r.push( n );
      return r;
      };

      function getSiblings(n) {
      return getChildren(n.parentNode.firstChild, n);
      }

      2. Update your code block to the following:

      var oldContent = getSiblings(document.getElementById(‘ExitDiv’));
      for(i in oldContent ){
      oldContent[i].style.display = “none”;
      }
      document.getElementById(‘ExitDiv’).style.display= ‘block’;

      That worked for me.

      Reply
  9. Nishant Arora

    Great work andy!

    But I dun get it, the exit.php/exit.html is not being loaded correctly, in fact I want it to redirect the parent window to a new address, yes that will be a nice option to add.

    Thanks

    Reply
  10. Sachin

    does not work in IE and Firefox : reloading page on clicking cancel button of the exit popup

    Reply
  11. wonderer

    Nice idea, I’ve just tested it with Firefox, but I don’t like that it’s not possible to change alert message.
    For sure it is a FF bug, but wouldn’t it be possible to show a div instead of that js alert window?

    Reply
  12. Daniel

    Hi Andy,

    thanks!!!! Will test this out after the holidays…

    But: I see you have a below the fold “soft” email popup…

    do you show anywhere how to do THAT??? (with aweber?))

    Daniel

    Reply
  13. Nigel Barksfield

    Great time saver script, but it didn’t work properly until I changed the inverted commas from :

    onClick=”isExit = false;”

    to

    onClick=”isExit = false;”

    Classic error!

    Hope this helps.

    Reply
    • Andy Sowards

      Yeah sorry that is typically a common mistake among copy/pasting from a site – good practice is to always use your own single quotes and double quotes :-D Thanks for the input Nigel! One day I am going through and beefing up this script, I swear lol (feel free to donate guys and I’ll get it done a lot faster lol) thanks everyone!

      Reply
  14. Julian

    I really like this, except the problem with Chrome not loading images is killing me! I guess I’ll have to find a different script :(

    Reply
  15. gouse

    HI andy,

    this script looks great. I am ooking for the similar, but I dont want to show the standard exit alert with leave this page and stay on the page.
    any thoughts?
    thanks.

    Reply
  16. Mark

    Andy,

    I’m having a weird problem with this script – it works fine in some browsers (e.g. Wyzo, Safari), but in Chrome, the images on the exit page don’t load, even though they do exit.

    Here’s one site where the script is installed:

    http://www.parismetromap.org/

    Any thoughts on how to get the images to load OK?

    Thanks.

    Reply
  17. Patrick Iverson

    I’ve got it working really well, yet the embedded videos on my exit page don’t display? Any clue there?

    Reply
  18. Omar

    Hi Andy -

    I’m having trouble using this script in wordpress. It kinda works… but the javascript line is screwing up my optimise press template. Probably a javascript conflict. Any suggestions?

    Omar

    Reply
  19. Rick

    Hi Andy,

    Looks like a great script but I’m unable to get it to work with survey monkey. I’d like people leaving the site to tell me why. Visit http://www.sohbo.org/MemberJoin/cms/signup.html and try to exit w/o using one of the enrollment links in the copy. It displays the page title of the exit page http://www.sohbo.org/YourOpinionCounts-1/cms/exit_1.html but not the content or the recommended links (which are also java code).

    Any help you can offer in getting your script to work for me would be greatly appreciated.

    ….. Rick

    Reply
  20. richard

    I was wondering if it was possible to capture the result of the alert box.

    Basically I need to do other actions if they hit “Ok” or “Cancel”

    Reply
  21. Maurice

    Hi Andy,

    GREAT script! It works like a charm!

    I only have one issue…
    I want it also working on the next page.

    If the leave OFFER1 page, they get the popup and if they click CANCEL, they go to OFFER2, which already displays behind the alertbox.

    Now on OFFER2 page I want the same trick again. If they leave OFFER2, I want to offer another page where they can subscribe to a newsletter or so.

    I copied and renamed the 2nd js file and calls this one from the OFFER2 page.

    I see the js code in the source, but it doesn’t do anything.

    Please help me to fix this.

    Maurice

    Reply
    • Andy Sowards

      lol thanks Yang – I have been so busy I have had no time to devote to making the exit popup code easier to use – much appreciated!

      Reply
  22. JRF

    I fixed that bug on when you hit cancel it allows you to navigate out with out prompting the alert, by simply adding:

    function ExitPop(isExit) {
    if(isExit != false) {
    window.location.reload()
    isExit=false;
    isPop = true;

    var bodyTag = document.getElementById? document.getElementsByTagName(“BODY”)[0] : document.body;

    the window.location.reload() just simply reloads the page and seems to fix that issue.

    Reply
  23. dan

    When visiting the page, it appears as all blank. Then when refresh is clicked, the popup activates and the page behind shows back up again. Any idea?

    Reply
  24. Andy

    Hey Andy
    I tried your code. Its almost working 100%. Just 1 problem though. I have a page which utilises a javascript opt-in form from Aweber. I dunno if that is a problem or not, but my opt-in form doesn’t seem to want to show up when it re-directs to that page.

    It also seems to interfere with the page design. Any clue as to what could be wrong? Cheers.

    Reply
  25. Michael Hopkins

    Thanks very much for this! The details above were a little difficult to follow, but after downloading the script it was EASY to implement.

    Thanks again.

    Reply
  26. Andy

    Hi,

    Love the script! Having a few problems, namely Chrome and IE – Haven’t tested in Opera yet – could really use some help if you have any updates to the script.

    Reply
  27. michael

    I’ve had more trouble with this script then probably anything else I’ve ever tried to do.

    Anyways, the page I’m trying to get it working on is http://www.health5news.com/test.php

    I managed to swipe some code and get the cookie version of the script working on http://www.daily-tribune-news.com

    but for some reason I cannot get it to work on the health5news page. So I installed your script and it sorta works… you can see for yourself, but basically it stops them when they try to leave, but when they click cancel to see the additional offer, the page freezes… I have no clue what the issue is. Any help would be greatly appreciated and I might even buy you a beer or 2.

    Reply
  28. Mark

    Thank you Andy. This is a great script. A jQuery version would be amazing! Please, please post that as soon as you are able.

    Would really love to have a similar script with no alert and a modal window, but I will try to tackle that myself, let you know how it goes. Thanks again for sharing with the rest of the community. And please do that jQuery version! Best.

    Reply
  29. Andy Sowards

    Here is an updated version of the cookie script previously mentioned —–
    ————————————->

    //DO NOT EDIT BELOW This LINE (Unless of course your Savvy!)
    ——————————

    var exp = 1; // the number at the left reflects the number of days for the
    cookie to last
    // modify it according to your needs

    var running = false
    var endTime = null
    var timerID = null
    function startTimer() {
    running = true
    now = new Date()
    now = now.getTime()
    endTime = now + (1000 * 60 * 1) // change last multiple for the number
    of minutes , make sure it matches with set timeout below
    showCountDown()
    }
    function showCountDown() {
    var now = new Date()
    now = now.getTime()
    if (endTime – now <= 0) {
    stopTimer()

    } else {
    var delta = new Date(endTime – now)
    var theMin = delta.getMinutes()
    var theSec = delta.getSeconds()
    var theTime = theMin
    theTime += ((theSec < 10) ? “:0″ : “:”) + theSec
    document.forms[0].timerDisplay.value = theTime //calls the time to
    display in form input with “theTime” id
    if (running) {
    timerID = setTimeout(“showCountDown()”,1000)
    }
    }
    }
    function newCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = “; expires=”+date.toGMTString(); }
    else var expires = “”;
    document.cookie = name+”=”+value+expires+”; path=/”; }

    function readCookie(name) {
    var nameSG = name + “=”;
    var ca = document.cookie.split(‘;’);
    for(var i=0; i var c = ca[i];
    while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
    if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length); }
    return null; }

    window.onload = function(){
    // this is where we start our journey…
    createExitPop();
    }// end function onunload

    function ajaxGET(divId, page, effect)
    {
    var xmlHttp;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch(e)
    {
    // Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
    }
    catch(e)
    {
    try
    {
    xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
    }
    catch(e)
    {
    alert(“Your browser does not support AJAX!”);
    return false;
    }
    }
    }

    xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
    {
    if(effect == ‘collapse’) {
    document.getElementById(divId).style.display=’none’; }
    else {
    document.getElementById(divId).innerHTML=xmlHttp.responseText; }
    }
    }
    xmlHttp.open(“GET”,page,true);
    xmlHttp.send(null);
    }

    function delayedRedirect(){
    window.location = “/finaloffer.html” // this is where you specify your
    3rd (well technically second page), sorry you missed the sale or new offer
    page
    }

    function createExitPop()
    {
    var theBody = document.getElementsByTagName(‘body’)[0];
    var newdiv = document.createElement(‘div’);
    newdiv.setAttribute(‘id’,'ExitDiv’);
    theBody.setAttribute(‘id’,'body’);
    newdiv.setAttribute(‘style’, ‘width: 100%; height: 100%;’);
    // put div on page
    theBody.appendChild(newdiv);
    //add exit pop to page (contents are from your exit.php(or whatever you
    named it) page)
    document.getElementById(‘ExitDiv’).value = ajaxGET(‘ExitDiv’, ExitPopURL);
    // style exit pop to resemble its own page
    document.getElementById(‘ExitDiv’).style.display = “none”;
    document.getElementById(‘ExitDiv’).style.top = ’0px’;
    document.getElementById(‘ExitDiv’).style.left = ’0px’;
    document.getElementById(‘ExitDiv’).style.position = ‘relative’;
    document.getElementById(‘ExitDiv’).style.backgroundColor = ‘#FFFFFF’;
    }// end createExitPop

    isExit = true;

    function ExitPop(isExit) {
    if(isExit != false) {
    isExit=false;
    isPop = true;
    var bodyTag = document.getElementById?
    document.getElementsByTagName(“BODY”)[0] : document.body;
    // add id=”body” so that it can be referenced.
    bodyTag.setAttribute(“id”, “body”);
    //replace body text with exit pop
    bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
    setTimeout(‘delayedRedirect()’, 60000); //set timeout for second page( time
    in milisecs ie 60000=60 secs
    window.startTimer(); // starts the timer on exit
    return AlertBox;
    } // end if
    }// end function

    window.onbeforeunload = function(){
    // Lay down an exit pop!!
    var num = readCookie(‘celeb1′)
    if (num < 1) {
    newCookie(‘celeb1′,’testcookie1′, exp);
    return ExitPop(isExit);

    }

    }// end function onunload

    Reply
  30. Andy Sowards

    Hey Guys, Just wanted to share with you guys an addition to this script – A Visitor of the site put together an addition to this script that allows you to set a cookie – Possibly you can use that cookie to prevent the popup showing for people who have visited the site before, or who have visited in the past week or however many days you would like to set it for.

    You can find the script below:

    //DO NOT EDIT BELOW This LINE (Unless of course your Savvy!) ——————————

    var exp = 1; // the number at the left reflects the number of days for the cookie to last
    // modify it according to your needs

    function newCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString(); }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/"; }

    function readCookie(name) {
    var nameSG = name + "=";
    var ca = document.cookie.split(‘;’);
    for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
    if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length); }
    return null; }

    window.onload = function(){
    // this is where we start our journey…
    createExitPop();
    }// end function onunload

    function ajaxGET(divId, page, effect)
    {
    var xmlHttp;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch(e)
    {
    // Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
    try
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e)
    {
    alert("Your browser does not support AJAX!");
    return false;
    }
    }
    }

    xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
    {
    if(effect == ‘collapse’) { document.getElementById(divId).style.display=’none’; }
    else { document.getElementById(divId).innerHTML=xmlHttp.responseText; }
    }
    }
    xmlHttp.open("GET",page,true);
    xmlHttp.send(null);
    }

    function createExitPop()
    {
    var theBody = document.getElementsByTagName(‘body’)[0];
    var newdiv = document.createElement(‘div’);
    newdiv.setAttribute(‘id’,'ExitDiv’);
    theBody.setAttribute(‘id’,'body’);
    newdiv.setAttribute(‘style’, ‘width: 100%; height: 100%;’);

    // put div on page
    theBody.appendChild(newdiv);

    //add exit pop to page (contents are from your exit.php(or whatever you named it) page)
    document.getElementById(‘ExitDiv’).value = ajaxGET(‘ExitDiv’, ExitPopURL);

    // style exit pop to resemble its own page
    document.getElementById(‘ExitDiv’).style.display = "none";
    document.getElementById(‘ExitDiv’).style.top = ’0px’;
    document.getElementById(‘ExitDiv’).style.left = ’0px’;
    document.getElementById(‘ExitDiv’).style.position = ‘relative’;
    document.getElementById(‘ExitDiv’).style.backgroundColor = ‘#FFFFFF’;

    }// end createExitPop

    isExit = true;

    function ExitPop(isExit) {
    if(isExit != false) {
    isExit=false;
    isPop = true;

    var bodyTag = document.getElementById? document.getElementsByTagName("BODY")[0] : document.body;

    // add id="body" so that it can be referenced.
    bodyTag.setAttribute("id", "body");

    //replace body text with exit pop
    bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
    return AlertBox;
    } // end if
    }// end function

    window.onbeforeunload = function(){

    // Lay down an exit pop!!
    var num = readCookie(‘celeb1′)
    if (num < 1) {
    newCookie(‘celeb1′,’testcookie1′, exp);
    return ExitPop(isExit);
    }

    }// end function onunload

    //————————-
    SCRIPT ENDED ABOVE

    Thanks everyone for your contributions, If you have an addition to this script leave it here in the comments or send me an email! Thanks!

    Reply
    • will

      hey andy i did some more revisions…i am using the script for affiliate sales, as i am guessing most ppl who need this are…so what i did was make a trigger when they leave the page to start a timed redirect with a counter….this way you can offer a buyer a special and give them a time limit and then redirect them to an alternate page if time elapses…should really increase sales and with the cookies set you can honestly tell them this is a one time offer….

      on the 3rd page when they miss the offer maybe leave an email, b/c ppl will email when they know you are serious that it was a one time offer…they are more likely to take quick action and you appear more than just another pop up marketer, but rather offering a true discount

      Reply
    • TK

      I have tried your cookie version but the problem is that the set cookie is included in the beforeunload function. while the initial first page loads, the cookie seems to not set but then if I click around my site the cookie gets set even though the popup doesn’t get triggered (popup=false etc)
      should the cookie be set once the popup actually gets triggered and the popup page gets shown, maybe put it in the exit.php file? I can’t seem to get that to work though. Thanks for any help.

      Reply
    • JRF

      Hey Andy cool script but I am super surprised no one has ever caught this major bug in it. Click an external link or try to navigate out with out the onExit=”false” and promp the alert box, click cancel and then click or type the external link again, it lets you leave with no alert.

      Reply
  31. Wallace Kline

    Thank you so much Andy! Your script just saved me 67 dollars. I would have bought Exit Splash is I didn’t find your website. There is one thing that you should know. The instructions you provided are very hard to follow. Also, please move the source code link to the top of the page. I almost couldn’t get the code to work because of a bad src link. The link you provided didn’t work. I had to replace it with the real file location. You should include this detail in the instructions. Sorry, if I seem critical. You’re a genius! Your graphics are radical!

    Reply
    • Andy Sowards

      @Wallace Kline – Oh Great! So you are going to give the $67 to me right? LOL JK (Feel free to donate of course!)

      No worries! Thanks for the constructive criticism – This script has been very popular and receives a lot of use – and It is over 1 year old now, so I will soon be re-building this post to be easier to follow, and probably building a jQuery version of this script as well so it will be even easier to use – I just haven’t had a chance to do that yet! Thanks though for your kind words :).

      Reply
    • Reggie

      Hey Andy,

      Thank you for the script. It’s just what I’ve been looking for.

      I do need to understand one additional thing since I’m a total newbie to this…

      Would you give me an example of how to correctly add the onClick=”isExit = false attribute to some links on my sales page (also the ‘onSubmit=”isExit = false attribute to my form)?

      Everything else works just great! Luv the script.

      Thanks in advance.

      Reggie

      Reply
      • Andy Sowards

        @Reggie – Sure thing, For links – Do this:

        If your link looks like this:

        <a href="buystuff.php" rel="nofollow">Buy my product now</a>

        then just change it to this:

        <a href="buystuff.php" onClick="isExit=false;" rel="nofollow">Buy my product now</a>

        And that should do it.

        For Forms:

        If your starting form tag looks like this:

        <form id="buyStuff" name="buyStuff" action="processBuy.php" method="POST">

        then just change it to this:

        <form id="buyStuff" name="buyStuff" action="processBuy.php" method="POST" onSubmit="isExit = false;">

        That should do it!

        These are primitive ways to add event handlers to things – but probably the easiest to explain. I will be updating this post soon to include more options and examples to non-Obtrusively add event handlers to your links and forms.

        Thanks!

  32. d1m1

    Hi, just wanted to say thanks: the script works perfectly; just what I was looking for. Just a thing though. I’ve been looking at the source code, and maybe I’ m missing something, but is there any way to change the confirm -or at least what I think is a standard javascript confirm()- that pops up into an alert?
    Thanks again.

    Reply
    • Andy Sowards

      @D1M1 – Sure, you should be able to change the confirm() function to the alert() function – You may need to change a few other things – but Check back here soon, I will be updating this post (or probably making a new post) that will give options and probably include jQuery support

      Reply
  33. Trey Murray

    Need some help. Would like to popup a window instead of alert when the user leaves the page. I had something similar working using the onbeforeunload event handler and calling a hidden layer. I tried to integrate this into your code, however so that we could get the redirect and a popup and it shoots up the alert with [object] in the box. Any suggestions?

    Reply
  34. Adam Arnold

    This worked awesome, I put it on my site and great!… except I use Firefox, which it works in, but not IE8 nor Opera10… ohh well looks like I be deleting this :(

    Reply
      • Adam Arnold

        Tried a few things but I am not gr8 with JS.

        I did add an alert to tell people what to do, I see a lot of sites use this method:

        bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
        // added
        alert(‘Press “CANCEL” on the next box for your Special Offer!!!’);
        // end added
        return AlertBox;

  35. Julez

    Hi Andy!

    I was trying to install the script in my page but to no avail.. it didn’t work out..

    first of all, do the need to be in PHP or can it be in HTML also with the exit page.. I try to paste the code into HTML page.

    Hope you can answer me because i badly need this one.

    Thank you and more power.

    Reply
  36. Aroy

    Hi Andy,

    [Please ignore my earlier comment. I failed to insert the code there)

    It's a cool script that you have got. But I have a rather unusual problem. I have an Flash audio player embeded in the web page. When i tried to play the audio player the script is getting active. It's a embeded "object" thing and I am clueless where to put this code - onClick="isExit = false;" so that the popup doesn't become active. I think the same problem could occer if somebody has a youtube Video embeded in the webpage and tries to play it.

    Please suggest a solution to this problem.

    The code is as follows -

    [CODE]

    [/CODE]

    Reply
  37. Andy

    sorry script code did not paste in but can be seen here near top of page:

    andynock dot com /new

    Thanks

    Reply
  38. Andy

    Hi Andy

    Is it possibe to stop the exit page appearing when a opt-in form is submitted such as:

    //GetResponse popup code

    Thanks in advance.

    Andy

    Reply
  39. Rob

    Hi Andy,

    I was wondering if I can swap the function of OK and CANCEL button when pop-up window appears.

    So, when users click OK then he/she will stay on the exit.php and when CANCEL button clicked, he/she leaves forever.

    can we do that?

    Reply
  40. Martin

    Great script really helpful in getting my head around this. I have some questions though:
    1. Do we have to call the alert box? The formatting looks so plain. Could we replace that with a fully formatted layer?
    2. is it possible to change the buttons at the bottom to different things (Cancel to ‘Stay on this page’ or Ok to ‘Not interested’.

    Reply
  41. David

    Really cool script. Is it possible to have the exit page defined an external link and to have the OK and Cancel functions reversed?

    Here’s the example:

    You’re about to leave the site and then you are prompted with a prompt that says, “Would you like to visit site A on your way out?” and then if they click ‘OK’ it would take them to the URL defined as the exit page.

    I was hoping your script would be easily modified to work that way.

    Would love to hear your feedback/suggestions.

    Thanks buddy!

    Dave

    Reply
  42. Andy

    @Lucas, Thanks! As of right now, all you have to do is add the isExit=false onclick attribute to the link you do not want the exit pop to fire on. In future releases I will try to detect links that are not pointing to your domain and automatically set the links up on the page.

    Thanks!

    Reply
  43. Lucas

    Hello!, great stuff, just a question, is there a way to load the popup ONLY on domain exit? and not on page exit?????????

    Reply
  44. dave

    is it possible to change the buttons at the bottom to different things (Cancel to ‘Stay on this page’ or Ok to ‘Not interested’. If so is it possible to modify the line just above the functions?

    Thanks.

    Reply
  45. Matt

    Can you alter the code so that instead of the exit changing everything between the body tags, it changes everything inside of div id=”X”?

    Reply
  46. Andy

    Hey Loi,

    Great!

    Well #1, Just continue to modify the DOM and manipulate the body tag, just as we did the last 2 times to change the body background color and image. Do some google searches to figure out how to modify other things.
    Because the options are limited only to your imagination.
    You really shouldn’t need to change much else.

    #2. Try this.

    myVar = “MyTitle”
    document.title= myVar

    For more assistance look at the example here: http://homepage.ntlworld.com/kayseycarvey/document2.html

    Hope this helps!

    Reply
  47. Loi

    OK, got it all working so far. Just a couple more questions.

    1. How could I change the body style class from the original page to suit that of the exit page?

    2. Also, is it possible to change the page title?

    The second question is not as important but it would be great if you could provide a solution.

    Many thanks again Andy. I look forward to your response!

    Loi

    Reply
  48. Andy

    Loi,

    Glad you could get it working.

    In order to do the body background image try this.

    Just put this line of code below the last one that was inserted into the javascript file that changed the background color.

    document.body.background=”images/bg640x480.gif”;

    I would use an absolute path for the image. such as ‘http://www.domain.com/images/yourimage.jpg’

    Hope this helps!

    Thanks!

    Reply
  49. Loi

    OK, got the color working.

    Now how can I change the body background image?

    Thank you very much for your help Andy, it is greatly appreciated.

    Reply
  50. Loi

    Sorry about the previous post.

    My question was do I need to insert anything into my body tag?

    At the moment I have body bgcolor=#cccccc

    thanks

    Reply
  51. Loi

    Thanks for the quick reply Andy. I inserted the code but still cannot get it to work?

    Do I need to insert any code into my tag?

    At the moment I have

    Thanks again!

    Reply
  52. Andy

    Loi,

    The easiest way to do that will be to add this javascript code into the ExitPop Function within the javascript file.

    document.getElementById(‘hey’).style.backgroundColor=’#99FFCC’;

    So you would need to change it to look something like this….

    function ExitPop(isExit) {
    if(isExit != false) {
    isExit=false;
    isPop = true;
    var bodyTag = document.getElementById? document.getElementsByTagName(”BODY”)[0] : document.body;
    // add id=”body” so that it can be referenced.
    bodyTag.setAttribute(”id”, “body”);

    // Change body background color
    document.getElementById(‘body’).style.backgroundColor=’#99FFCC’;

    //replace body text with exit pop
    bodyTag.innerHTML = document.getElementById(’ExitDiv’).innerHTML;
    return AlertBox;
    } // end if
    }// end function

    Hope that helps!

    Reply
  53. Loi

    Hey Andy,

    How do you change the background color when the exit popup shows? I want to use a different color for the exit.php file.

    Please respond. Thank you.

    Reply
  54. Andy

    Mark,

    Sorry! I guess I will have to look into this issue further, Perhaps I should add that in as an option in the settings. I’ll let you know when I figure it out ;)

    Keep playing around with it tho, you never know!

    Reply
  55. Mark

    Hey Andy,
    Thanks for the tip, but unfortunately it didn’t work. Its not popping on anything now.

    Reply
  56. Loi

    Great information Andy.

    Just a couple of questions:

    1. Is it possible to change the body style, background color or image within the exit page that is displayed?

    2. Also, could you change the title meta tags as well?

    Thanks a bunch!

    Reply
  57. Andy

    Hey Mark,

    Thanks!

    Well in order to do what you are trying to do, I would set the onClick of the link to be like this

    <a href=”link.php” onClick=”isExit=True; ExitPop(isExit);” rel=”nofollow”>

    and in the javascript file just comment out the onbefore unload, like this.

    /*
    window.onbeforeunload = function(){
    // Lay down an exit pop!!
    return ExitPop(isExit);
    }// end function onunload
    */

    Or backup the file and remove that all together.

    Now whatever link you give that attribute should trigger the exit pop.

    Let me know if this works for you, if not, then Its a similar method as this.

    Thanks!

    Reply
  58. Mark

    Hey Andy. Great script, but I wanted to know if I can do the opposite. Have it run if only certain buttons are selected.
    I tried messing with the isExit section, but to no avail. Any pointers?
    Thanks.

    Reply
  59. Andy

    Also, to answer your question, The way I just described would be using the regular method and no iFrames.

    The reason the page is coming through with no formatting is because that exit.php page inherits its formatting from the parent page. so if you are bringing it in through an iframe, your just getting the html within the exit.php file.

    Does this make sense? So if you kept your same process, and linked the stylesheet to the page to format it, then it should be fine.

    Otherwise, you should try the method I explained above.

    Hope this fixes your issues :)

    Reply
  60. Andy

    Hey invis,

    Thanks for giving the script a try, it Sounds like you need to use the Set and Execute script that I have used in the past. Basically, in this situation where Javascript isn’t working on the exitPop page, the Set and Execute function makes the exitPop page able to run javascript as normal.

    Here is the function:

    function setAndExecute(divId, innerHTML) {
    /* http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic&f=20&t=006435 */
    var div = document.getElementById(divId);
    div.innerHTML = innerHTML;
    var x = div.getElementsByTagName(“script”);
    for( var i=0; i < x.length; i++) {
    eval(x[i].text);
    }
    }

    I will explain further details later, but for now, you can learn how it is used here --> http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic&f=20&t=006435

    Hope this helps!

    Thanks

    Reply
  61. invis

    HI
    I try to use this with iframe, not a div. But it not work.
    Why iframe? Because I want run JavaScript on pop-up page.

    I do this:
    replace:
    var newdiv = document.createElement(‘div’);
    to
    var newdiv = document.createElement(‘iframe’);
    and
    document.getElementById(‘ExitDiv’).value = ajaxGET(‘ExitDiv’, ExitPopURL);
    to
    document.getElementById(‘ExitDiv’).src = ajaxGET(‘ExitDiv’, ExitPopURL);

    but when pop-up go , I saw only plain text of page NOT FORMATED HTML.
    what do you think?
    P.S. sorry for my english :)

    Reply
  62. Andy

    Jocelyn,

    I believe that it is most Google-Friendly when you use it sparingly as you suggested, That is how I would use it, just to preserve a good User Experience. But it can go either way, however you feel comfortable using. I have had clients that wanted it all over their site on every page, as well as those who just use it on the “Sales” part of the site. So that if they leave during that information intensive section of the website they can try to entice them back with some cleverly placed info.

    As for the “pop on refresh” from what I have researched Javascript cannot detect if the user is clicking refresh, until after the fact. But I will look into it further tonight.

    Thanks again for your usage and Thoughts :)

    Reply
  63. Jocelyn

    Just another thought that came up. How Google-friendy do you think a popup of this nature is? Perhaps it’s a type of code best placed and used sparingly on very few pages, instead of on a whole website?

    Reply
  64. Andy

    Jocelyn,

    Thank you for your insight and concern! I agree that could be a potential issue, however, other exit pop software acts in the same manner I believe. I will look into this immediately and let you know when a resolution to this ‘accidental refresh launching’ issue is found.

    In the meantime, let me know if you find anything else. :)

    Reply
  65. Jocelyn

    So I’ve run into another problem with your script! When you refresh the page, the script activates, thinking you’re leaving (instead of just refreshing the current page). While I’m not sure how many users are going to be refreshing a page, this can be a problem!

    Reply
  66. Andy

    Hey Jocelyn,

    Thanks for giving it a try!

    Good job on fixing your error, I was just about to reply with the same suggestion, I looked into your implementation on your site.

    Nice work by the way, I like how you are using it there :)

    Let me know if you need any other assistance!

    Reply
  67. Jocelyn

    I’ve tried implementing this on my website, but it doesn’t seem to want to cooperate with me. Everything is in place but when I navigate away from the page, the popup does not appear. Any idea what’s wrong?

    Reply

Leave a Reply