Creating an Exit Modal Box using the jQuery library

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

exit-modal-box

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