Exit Pop-up Script

Hi, We all know that everyone is a propective client right? I am here to show you how you can get that user who just clicked close on your web page. Let’s have this user stay before he decides to go on his way and never come back.

First, all you will need is a little bit of HTML knowledge. I’ll walk you through the code so you don’t need to worry.

First let’s add our favorite Javascript Library…

We then setup our script by defining some variables on a new <script> tag.


This will define how our Script runs.

  • detectblur is a boolean(true/false) value that determines whether the script should be fired whenever the user leaves your page without closing it. (e.g, change tab window)
  • interrupt is a boolean(true/false) value that determines whether the script should be fired whenever the window is going to be closed and interrupt the user with a custom message defined below.
  • interrupt_message a string value that is displayed on the interrupt confirmation box is fired.

We then paste the following code before the ending <script> tag.

var blurred = false; // flag that determines whether the screen is blurred or not
var mousestart = 0; // the placeholder where the user first entered the page from above(often, the tab)
var captured = false; // flag that determines whether mousestart was captured or not

$(function(){
	// The catch method. basically appends an html div that is filled with content from your own unblockable div then sets the appropriate flags
	var unblockable_catch = function() {
		if (!blurred) {
			$('body').append('

'); $('.unblockable .content').html($('#unblockable_content').html()); blurred = true; mousestart = 0; captured = false; $('#unblockable_catch').css({top:-10}); } } // The raw javascript interrupt screen that fires before the window gets closed if (interrupt) { window.onbeforeunload = function () { unblockable_catch(); // fires the catch method return interrupt_message; // your custom interrupt message defined from above } } // A bunch of event hooks $('body').append('
'); if (detectblur) { $(window).blur(unblockable_catch); } $('#unblockable_catch').live('mouseover', unblockable_catch); $('#unblockable_close input').live('click', function() { $('.unblockable_div, #unblockable_dim').fadeOut(500, function(){ $(this).remove(); blurred = 0; setTimeout(function(){$('#unblockable_catch').css({top:0});}, 5000); }); }); // A way we can determine where the tab is located. $(window).blur(function() { //so whenever the window is not focused we reset the mousestart and captured variables mousestart = 0; captured = false; }); // Whenever the user clicks the tab, we determine that the first mousemove over the page is from the tab location $(window).mousemove(function(e){ if (!captured) { if (e.pageY < 10) { mousestart = e.pageX - 185; // we set it half the width of the invisible catch div captured = true; // so we don't capture again $('#unblockable_catch').css({left: mousestart, top: -10}); setTimeout(function(){$('#unblockable_catch').css({top:0});}, 2500); } } }); });

Whoah! That's a lot of code there! well you don't need to understand all of it actually but if you do, read the comments above.

Now everything that we need for the script to run is given, let's get to styling. Copy the following code inside the <head> tag.


What's awesome is that our markup can be styled using the .unblockable class without being used directly in the script.

Then finally, our markup

	

Provide your own design and customize to your heart's content.

I hope this tutorial helped you catch that client in his attempt to escape 🙂

You can check out a Live Demo here.
For the script used in this tutorial, Download here.

This plugin requires the latest version of jQuery.

I have also made this script as a Plugin version for WordPress with added features and options. Check it out here.

If you see corrections or suggestions to the existing code, please comment below.

This entry was posted in Tutorials and tagged , . Bookmark the permalink.

3 Responses to Exit Pop-up Script

  1. Pingback: Exit Pop-up Plugin | Wordpress Harmony

  2. Steve says:

    was this script written with Cookies, or does that popUp come everytime?

  3. wayne says:

    Hi,

    Thanks for a great bit of code, work like a treat.

    I do have one peoblem, the javascript alert box has appeared dead over the exit alert box, so you can see the box.

    Any advice on how to move the alert box…

    Thanks
    Wayne Ansell

Leave a Reply

Your email address will not be published. Required fields are marked *