Cross Browser JavaScript Exit Pop

MSN Cross Browser JavaScript Exit Pop

How to Create a Working Exit Popup

Although exit pops can be really annoying when over used, they do have their place when used properly. When you bombard someone with ten exit pops to different offers and up-sells, that’s probably overkill. However, if you use an exit pop to remind someone to save a form before leaving your site or you direct them to a discount or special offer, then that’s probably a much better use of this often frowned upon functionality.

Creating a working exit popup for an HTML page isn’t that difficult and we’re going to show you how to do it using JavaScript. And you don’t have to be a coding wiz to implement this solution; nor will you have to spend any money on some slick tool to do this either. So without further ado, here is a simple cross browser JavaScript exit pop solution that we use in our HTML pages.

Required jQuery Files

In order for our solution to work you’re going to need to download jQuery files and install them on your server. Note: we’re using the version 2.x file and haven’t had any issues, but if you’re worried about older browsers you might want to go with the version 1.x file; you only need one or the other version not both. Also, you’ll probably want to use the compressed version of the file, your code will run a little faster, however the uncompressed files work with our solution too.

When you download the file you’ll end up with a file similar to “jquery-2.1.1.min.js” – the 2.1.1 will be replaced with the version release of the file you downloaded, so don’t worry if it doesn’t exactly match the version we’re using.

We recommend that you upload this file to your webserver in a folder called “js” that your HTML pages will have access. We do this because we have other JavaScript routines we use and organizing them in one location makes things a little easier. A little organization now, makes things much easier down the road.

Cross Browser JavaScript Exit Pop Code

There are only a few pieces of code to this solution and the first is referencing the jQuery files. Add the following line of code within the HEAD statement of your HTML file:

<script src="yourpath/js/jquery-2.0.3.min.js"></script>

Make sure you change the “yourpath” portion of the code to the proper path name to your “js” folder based on where your HTML files are located. And you will most likely have to update the version of your jQuery file too.

The second piece of code you need will also go within the HEAD statement of your HMTL file and someplace AFTER the first line of code you added above (hint: we usually place both right before the final “/HEAD” tag.

<script type="text/javascript">
    function PopIt() { 
      var redirect_to = 'YourRedirectPage'; 

      window.onbeforeunload = UnPopIt;
      setTimeout(function() {
        window.onbeforeunload = function() {};
        setTimeout(function() {
          document.location.href = redirect_to;
        }, 500);
      },5);
      return "**********\n YourMessgeGoesHere\n**********";
      }

    function UnPopIt()  { /* nothing to return */ }

    $(document).ready(function() {
      window.onbeforeunload = PopIt;

      $("a[id=nojump]").click(function(){ window.onbeforeunload = UnPopIt; });
      $("[id=YourFormID]").click(function(){ window.onbeforeunload = UnPopIt; });
    });
</script>

There are three things you need to change in the code above. First, change “YourRedirectPage” to the page you want your exit pop to send your visitor to when they click the “Stay On Page” button. Note: the value of “YourRedirectPage” can be a relative or absolute page value (e.g. special-offer-discount.html or http://yourdomain.com/squeezepages/special-offer-discount.html).

Second, you’ll want to change “YourMessgeGoesHere” to the message you want to display to your visitors in your exit popup window. Your message can be short and sweet or as long as you want, just make sure it conveys want you need it to and some type of Call-To-Action. Also, the \n characters represent a newline or linefeed, so use these and spaces to pretty up the message that is displayed in your exit popup window.

The last and final thing you need to change (well maybe) is “YourFormID”. This line of code is only needed if you’re using this exit pop code on a page that has an opt-in form. You’ll need to change “YourFormID” to the ID of your opt-in form. And if the HTML page your adding this code to does not have an opt-in form, you can delete this line of code:

$("[id=YourFormID]").click(function(){ window.onbeforeunload = UnPopIt; });

from the function; leaving it in won’t cause a problem either. By the way, if you forget to change the “YourFormID” on an page that has an opt-in form, then the exit popup will be shown when your visitor clicks your opt-in button.

Updating Hyperlink <a> Tags

We’ve also included a little bit of code in our function for hyperlinks. This little bit of code will stop the JavaScript exit popup from firing IF and ONLY IF you add the id=”nojump” code to your hyperlink tags.

$("a[id=nojump]").click(function(){ window.onbeforeunload = UnPopIt; });

Below is an example of how you would add it to a hyperlink:

<a id="nojump" href="”some-page-on-your-site-link”">YourAnchorText</a>

We typically just add the id=”nojump” to the hyperlinks that reference pages on our site, that way the exit popup doesn’t fire and display to the visitor when they are staying on our site (accessing internal site pages).

However, if we have a link on our offer page that goes to some other site (external site pages), then we do NOT add the id=”nojump” code to the hyperlink and the exit popup will be shown when the visitor clicks the hyperlink and tries to leave our site.

Adding or not adding the id=”nojump” code to hyperlinks on the page allows us to independently control each hyperlink on the page as needed. Who knows, there might be a time when you want an exit pop to appear even when a users stays on your site.

Cross Browser JavaScript Exit Pop Compatibility

Unfortunately all browsers are not created equal and therefore not all browsers support JavaScript Exit Popups the same. Firefox is the real pain, since it does not display (return) your customized message. It will display its own message and buttons for staying on or leaving the page.

Other browsers do a much better job of displaying your exit pop window and message the way you want it to look. The text on the buttons for staying on or leaving a page are a little different from browser to browser, but at least your customized message is displayed the way you coded it.

Below is an example of how some browsers display the exit pop window.

MSN Cross Browser JavaScript Exit Pop Windows

JavaScript Exit Pop Code Sample

Here’s a small JavaScript exit pop code sample that you can pretty much Cut & Paste into your own HTML files and use going forward for all your exit pops. Don’t forget to download and install the jQuery files mentioned above.

We’ve included some comments (Step 1 – Step 7) in the file for your convenience and hopefully you won’t have any problems getting this to work. If you do, just leave us a comment and describe what’s happening or not happening the best you can and we’ll try to help you get it working.

Things To Consider

There are plenty of exit pop solutions out there, but this is one we’ve developed for our use with HTML files and it works well across all browsers that we’ve tested. Feel free to modify it for your needs and don’t go spending money on one of those pricey solutions, unless you really need some specific functionality that you just can’t get to work by modifying this code.

A couple of things you should realize: if someone turns off JavaScript in their browser, this solution isn’t going to do you any good. With JavaScript off the PopIt and UnPopIt functions won’t fire and no window pop will happen when someone closes their browser or tries to go to a new page. Also, Mobile browsers tend not to support this type of JavaScript function either, so mobile visitors to your site won’t see your popup and you can’t control what happens when they try to leave your page.

Oh well, free is free, and there is only so much you can control in your code when the browser or platform doesn’t support certain functions.

Readers Comments

comments powered by Disqus

Sign Me Up For Millionaire Success Tips & More!

We Respect Your Privacy

Recent Comments

Recent Tweets

Connect With Us

Cross Browser JavaScript Exit Pop

MSN Cross Browser JavaScript Exit Pop

How to Create a Working Exit Popup

Although exit pops can be really annoying when over used, they do have their place when used properly. When you bombard someone with ten exit pops to different offers and up-sells, that’s probably overkill. However, if you use an exit pop to remind someone to save a form before leaving your site or you direct them to a discount or special offer, then that’s probably a much better use of this often frowned upon functionality.

Creating a working exit popup for an HTML page isn’t that difficult and we’re going to show you how to do it using JavaScript. And you don’t have to be a coding wiz to implement this solution; nor will you have to spend any money on some slick tool to do this either. So without further ado, here is a simple cross browser JavaScript exit pop solution that we use in our HTML pages.

Required jQuery Files

In order for our solution to work you’re going to need to download jQuery files and install them on your server. Note: we’re using the version 2.x file and haven’t had any issues, but if you’re worried about older browsers you might want to go with the version 1.x file; you only need one or the other version not both. Also, you’ll probably want to use the compressed version of the file, your code will run a little faster, however the uncompressed files work with our solution too.

When you download the file you’ll end up with a file similar to “jquery-2.1.1.min.js” – the 2.1.1 will be replaced with the version release of the file you downloaded, so don’t worry if it doesn’t exactly match the version we’re using.

We recommend that you upload this file to your webserver in a folder called “js” that your HTML pages will have access. We do this because we have other JavaScript routines we use and organizing them in one location makes things a little easier. A little organization now, makes things much easier down the road.

Cross Browser JavaScript Exit Pop Code

There are only a few pieces of code to this solution and the first is referencing the jQuery files. Add the following line of code within the HEAD statement of your HTML file:

<script src="yourpath/js/jquery-2.0.3.min.js"></script>

Make sure you change the “yourpath” portion of the code to the proper path name to your “js” folder based on where your HTML files are located. And you will most likely have to update the version of your jQuery file too.

The second piece of code you need will also go within the HEAD statement of your HMTL file and someplace AFTER the first line of code you added above (hint: we usually place both right before the final “/HEAD” tag.

<script type="text/javascript">
    function PopIt() { 
      var redirect_to = 'YourRedirectPage'; 

      window.onbeforeunload = UnPopIt;
      setTimeout(function() {
        window.onbeforeunload = function() {};
        setTimeout(function() {
          document.location.href = redirect_to;
        }, 500);
      },5);
      return "**********\n YourMessgeGoesHere\n**********";
      }

    function UnPopIt()  { /* nothing to return */ }

    $(document).ready(function() {
      window.onbeforeunload = PopIt;

      $("a[id=nojump]").click(function(){ window.onbeforeunload = UnPopIt; });
      $("[id=YourFormID]").click(function(){ window.onbeforeunload = UnPopIt; });
    });
</script>

There are three things you need to change in the code above. First, change “YourRedirectPage” to the page you want your exit pop to send your visitor to when they click the “Stay On Page” button. Note: the value of “YourRedirectPage” can be a relative or absolute page value (e.g. special-offer-discount.html or http://yourdomain.com/squeezepages/special-offer-discount.html).

Second, you’ll want to change “YourMessgeGoesHere” to the message you want to display to your visitors in your exit popup window. Your message can be short and sweet or as long as you want, just make sure it conveys want you need it to and some type of Call-To-Action. Also, the \n characters represent a newline or linefeed, so use these and spaces to pretty up the message that is displayed in your exit popup window.

The last and final thing you need to change (well maybe) is “YourFormID”. This line of code is only needed if you’re using this exit pop code on a page that has an opt-in form. You’ll need to change “YourFormID” to the ID of your opt-in form. And if the HTML page your adding this code to does not have an opt-in form, you can delete this line of code:

$("[id=YourFormID]").click(function(){ window.onbeforeunload = UnPopIt; });

from the function; leaving it in won’t cause a problem either. By the way, if you forget to change the “YourFormID” on an page that has an opt-in form, then the exit popup will be shown when your visitor clicks your opt-in button.

Updating Hyperlink <a> Tags

We’ve also included a little bit of code in our function for hyperlinks. This little bit of code will stop the JavaScript exit popup from firing IF and ONLY IF you add the id=”nojump” code to your hyperlink tags.

$("a[id=nojump]").click(function(){ window.onbeforeunload = UnPopIt; });

Below is an example of how you would add it to a hyperlink:

<a id="nojump" href="”some-page-on-your-site-link”">YourAnchorText</a>

We typically just add the id=”nojump” to the hyperlinks that reference pages on our site, that way the exit popup doesn’t fire and display to the visitor when they are staying on our site (accessing internal site pages).

However, if we have a link on our offer page that goes to some other site (external site pages), then we do NOT add the id=”nojump” code to the hyperlink and the exit popup will be shown when the visitor clicks the hyperlink and tries to leave our site.

Adding or not adding the id=”nojump” code to hyperlinks on the page allows us to independently control each hyperlink on the page as needed. Who knows, there might be a time when you want an exit pop to appear even when a users stays on your site.

Cross Browser JavaScript Exit Pop Compatibility

Unfortunately all browsers are not created equal and therefore not all browsers support JavaScript Exit Popups the same. Firefox is the real pain, since it does not display (return) your customized message. It will display its own message and buttons for staying on or leaving the page.

Other browsers do a much better job of displaying your exit pop window and message the way you want it to look. The text on the buttons for staying on or leaving a page are a little different from browser to browser, but at least your customized message is displayed the way you coded it.

Below is an example of how some browsers display the exit pop window.

MSN Cross Browser JavaScript Exit Pop Windows

JavaScript Exit Pop Code Sample

Here’s a small JavaScript exit pop code sample that you can pretty much Cut & Paste into your own HTML files and use going forward for all your exit pops. Don’t forget to download and install the jQuery files mentioned above.

We’ve included some comments (Step 1 – Step 7) in the file for your convenience and hopefully you won’t have any problems getting this to work. If you do, just leave us a comment and describe what’s happening or not happening the best you can and we’ll try to help you get it working.

Things To Consider

There are plenty of exit pop solutions out there, but this is one we’ve developed for our use with HTML files and it works well across all browsers that we’ve tested. Feel free to modify it for your needs and don’t go spending money on one of those pricey solutions, unless you really need some specific functionality that you just can’t get to work by modifying this code.

A couple of things you should realize: if someone turns off JavaScript in their browser, this solution isn’t going to do you any good. With JavaScript off the PopIt and UnPopIt functions won’t fire and no window pop will happen when someone closes their browser or tries to go to a new page. Also, Mobile browsers tend not to support this type of JavaScript function either, so mobile visitors to your site won’t see your popup and you can’t control what happens when they try to leave your page.

Oh well, free is free, and there is only so much you can control in your code when the browser or platform doesn’t support certain functions.



Sign Me Up For Millionaire Success Tips & More!

We Respect Your Privacy

Recent Comments

Recent Tweets

Connect With Us

© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
backtotop