Creating an Exit Modal Box using the jQuery library

Posted on April 25, 2009, Filled under AJAX, JavaScript, jQuery, Bookmark it

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

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!

April 25, 2009
article by Gabriel C.
10 comments

Tags:

Creating an Exit Modal Box using the jQuery library

How to Implement a jQuery AJAX Login Form into a Modal Box
at April 24, 2009 with 50 comments
Catch404: Modal Plugin for Handling Broken Links: jQuery | CSS
at July 31, 2010
Glow, an Open Source JavaScript Library by BBC
at July 11, 2009 with 1 comment
Creating iPhone-style Checkboxes with jQuery and Prototype
at August 9, 2009
Facebook-style Lightbox/Modalbox powered by jQuery and MooTools
at March 12, 2010

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

anilreddy
April 27, 2009 at 5:43 AM
Reply
Hi nice Modal box…
i like to use on my site
thanks for the bit
15+ jQuery Popup Modal Dialog Plugins and Tutorials | Choose Daily
September 9, 2009 at 4:11 AM
[...] 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. [...]
15+ jQuery Popup Modal Dialog Plugins and Tutorials | Tutorials Archive - tutarchive.com - photoshop tutorials, free photoshop tutorials, tutorials, tutorial search, tutorial links, find tutorials, photo shop tutorials, html tutorials, flash tutorials, dr
September 24, 2009 at 3:15 PM
[...] 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. [...]
Greg
February 16, 2010 at 12:26 AM
Reply
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. Mike
  April 22, 2010 at 3:15 AM
  Reply
  I, too, am looking for a solution to this.
Simon
February 23, 2010 at 12:58 AM
Reply
I am viewing it in IE8 and it does not seem to work??
Jon
March 25, 2010 at 4:20 AM
Reply
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?
Victoria
June 9, 2010 at 10:54 PM
Reply
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
anotherDeveloper
July 3, 2010 at 9:51 AM
Reply
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..
digof
August 9, 2010 at 7:05 AM
Reply
not working in IE 8