Creating an Exit Modal Box using the jQuery library

Posted on April 25, 2009, under AJAX, JavaScript, jQuery 

Shows up when the user is going to click close [X] button

Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window.

To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action.

Let’s create the main html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Exit PopUp</title>

  <link type='text/css' href='basic.css' rel='stylesheet' media='screen' />


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.simplemodal.js"></script>

  <script type="text/javascript" src="init.js"></script>
</head>

<body>

NOTE: If you are with the mouse pointer inside the document 
go to exit this window and see what happens.<br /><br />

            Home | Contact | Lorem Ipsum | About

<h1>This is a simple site page</h1>

<h2>This is a title</h2>

<p>This paragraph contains some text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exercitation ulliam corper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

<hr />

<i>Copyright 2009 Company Inc.</i>

<div style="display: none; padding: 10px;" id="exit_content">
<h1>Goodbye visitor!</h1><h3>Thanks for visiting us!</h3><br />
Some additional text here ... lorem ipsum.

</div>

</body>

</html>

In the HEAD section of the page, I’ve included the 2 JQuery scripts and the script that initializes the modal box when user wants to exit the page.

init.js

$(document).ready(function() {

$(document).mousemove(function(e) {

if(e.pageY < = 5)
{
// Launch MODAL BOX
$('#exit_content').modal({onOpen: modalOpen, onClose: simplemodal_close});
}

});

});

/**
 * When the open event is called, this function will be used to 'open'
 * the overlay, container and data portions of the modal dialog.
 *
 * onOpen callbacks need to handle 'opening' the overlay, container
 * and data.
 */
function modalOpen (dialog) {
	dialog.overlay.fadeIn('fast', function () {
		dialog.container.fadeIn('fast', function () {
			dialog.data.hide().slideDown('fast');
		});
	});
}

   /**
 * When the close event is called, this function will be used to 'close'
 * the overlay, container and data portions of the modal dialog.
 *
 * The SimpleModal close function will still perform some actions that
 * don't need to be handled here.
 *
 * onClose callbacks need to handle 'closing' the overlay, container
 * and data.
 */
function simplemodal_close (dialog) {
	dialog.data.fadeOut('fast', function () {
		dialog.container.hide('fast', function () {
			dialog.overlay.slideUp('fast', function () {
				$.modal.close();
			});
		});
	});
}

When the DOM is ready and the over moves the mouse pointer, the script checks if the cursor is at the top area of the document (first 5px - this value can be changed). If it is, then the popup launches. This works very well when the visitor is going to use the 'X' to exit the page. I've also added some visual effects (when the modal box launches and when it exists) that belong to the JQuery plugin.

Happy coding ;)

Comment via Facebook

comments

33 Replies to "Creating an Exit Modal Box using the jQuery library"

  1. Hi nice Modal box…
    i like to use on my site

    thanks for the bit

  2. [...] Creating an Exit Modal Box using jQuery Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window. To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action. [...]

  3. [...] Creating an Exit Modal Box using jQuery Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window. To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action. [...]

  4. Really easy to implement and just what I was looking for.

    How would I go one step further and only display the box once so that when someone has seen the message, it doesn’t display again when they go to browse another site.

    I was looking into using the ‘one’ function but having difficulty getting to work.

    Thanks.

    1. I, too, am looking for a solution to this.

    2. set a cookie to a future date when they hit the close button !

  5. I am viewing it in IE8 and it does not seem to work??

  6. This is a very handy script! It there any way to add a cookie so that the user won’t get prompt each time that they come back to the site?

  7. Hi,
    Thank you for creating this tutorial. I imoplemenetd it on my site, but had an issue because it appears behind the flash video in Windows but works perfectly on my Mac… Is there a way to ensure that the modal box always appears on top?
    Thanks,
    Victoria

    1. I am experiencing the same issue, can someone help out?

      1. should just be a z-index issue. and possibly an issue with the flash embed params. you should be sure to set the window mode to transparent. () googling that and css z-index should resolve your issues.

        1. so everything in the parens got removed….

          <param name=”wmode” value=”transparent”>

          1. Thanks, I forgot all about that. I’ll try that and get back with you.

  8. so this is nice but i’ve done something before myself and ran into an issue that appears you have as well… the issue is this. when you have a page that scrolls, if the user scrolls down your page more than 5 pixels [i.e. if(e.pageY <= 5)] then when the mouse leaves the area there's no trigger. the solution you ask? just subtract .scrollTop() in the math. [if(e.pageY-$(document).scrollTop() <= 5)]

    this helps if your page is long enough to scroll. there are however two more obstacles. one is that if the user moves the mouse fast enough the event is not triggered. also, if a users mouse is outside of the document on page load the event could be triggered when they move the mouse INTO the document from the address bar to click on a link. it's a tough one i've though about for some time now.. :P

    1. This code works perfect for me, thanks for fixing the scroll page problem. Can anyone help me with code to make this pop-up appear only once if the person has been to the site before?

      1. You can use (PHP) cookies to check if the user has already visited your website. Set a cookie with a specific value the first time he opens the web page. When he returns, check if the cookie is already set. If it is, do not include the “Exit Modal Box” ;-)

        1. Can you give the full source of that php function ? We are just websites owners, not developers or programmers… :-(

    2. PERFECT! I am sure you just saved me about 10 hours of frustration and tons of hair.

  9. It’s not working on IE 8 :(

  10. Doesn’t seem to work in Firefox either. Anyone know how to amend the code to fix it? It works just fine in Safari and Chrome.

  11. @Digof, @Victor: I’ve tested the script in IE 8.0.6 and it works fine! What versions are you using?

    @Clare: Which version of FireFox are you using? It’s the first browser that I used to test the script and it worked fine.

  12. $.modal.close();
    is working only once…………..
    for the second time it is not closing the model box by clicking on it…..
    plz help me…………..

  13. Is it possible to launch the exit popup message just once per session ?

    1. To do this you could use PHP Sessions. Once the Exit Modal Box is launched, a sessions is registered. Future launch attempts (in the same browser session) should be blocked if the initial session is registered.

  14. What needs to be done to get this to work in IE8 and IE9?

  15. it does not work in ie8. my ie version is: 8.0.7
    please do something in code that it would work in ie all versions also. you can see this is problem in this otherwise it is best script.

  16. This is going to sound noobish, but …. is there a simple way to implement this in a WP blog? :-/

  17. Nicholas Dutson have reason, not works in ie8, ie9, deadly not function there?

  18. to work in ie8 must update the libraries simplemodal.js

  19. not working in ie9 :(

  20. Great script but not working in IE9 which is a great shame as unfortunately this is the main browser

  21. For of you, who want cookie-enabled. Just do this:

    Put this file in your js-directory:
    https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

    Next:
    go to your init.js

    replace the mouseover and launch modal box code, with this code:

    $(document).mousemove(function(e) {
    if(e.pageY <= 5) {

    if ($.cookie(‘exit_modal’) != ’1′) {
    // Launch MODAL BOX
    $(‘#exit_content’).modal({onOpen: modalOpen, onClose: simplemodal_close});
    //code to display popup
    $.cookie(‘exit_modal’, ’1′, { expires: 30 });
    }

    }
    });

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)

POSTING RULES:

  • The comment must be relevant with the topic of the post.
  • Only comments with real email addresses will get approved. So, emails like 'abc@domain.com' will not be accepted.
  • Do not post the same message in multiple articles through the site.
  • Do not post advertisements, junk mail or pyramid schemes.
  • In case you post a link to another site, please explain briefly where the link goes as a courtesy to other users.
  • Do not post comments such as: "Thank you", "Awesome", "Nice tutorial", "Merci", etc.