Creating an Exit Modal Box using the jQuery library

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 Comments

  1. says

    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 });
    }

    }
    });

  2. Mike says

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

  3. muhammad shahid says

    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.

    • Gabriel C.Gabriel C. says

      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.

  4. pradeep says

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

  5. Gabriel C.Gabriel C. says

    @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.

  6. anotherDeveloper says

    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.. 😛

    • says

      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?

      • Gabriel C.Gabriel C. says

        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” 😉

  7. says

    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

  8. Jon says

    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?

  9. Greg says

    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.

Trackbacks

  1. […] 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. […]

  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. […]

Leave a Reply

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