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

April 25, 2009
article by Gabriel C.
31 comments

Tags: modal box

How to Implement a jQuery AJAX Login Form into a Modal Box
at April 24, 2009 with 85 comments
Carousel Examples: YUI Library, jQuery, MooTools & Prototype
at April 11, 2009
Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes
at January 13, 2009 with 3 comments
An AJAX (jQuery) Username Availability Checker with PHP Back-end
at December 5, 2008 with 62 comments
Create a Fancy F.A.Q. Page with jQuery
at March 19, 2009 with 17 comments

Comment via Facebook

31 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.
2. paul n
  June 19, 2012 at 7:13 AM
  
  Reply
  
  set a cookie to a future date when they hit the close button !
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
1. Thuy
 October 20, 2010 at 6:25 AM
 
 Reply
 
 I am experiencing the same issue, can someone help out?
 1. AnotherDeveloper
 October 21, 2010 at 2:36 AM
 
 Reply
 
 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. AnotherDeveloper
 October 21, 2010 at 2:38 AM
 
 Reply
 
 so everything in the parens got removed….
 
 <param name=”wmode” value=”transparent”>
 1. Thuy
 October 21, 2010 at 2:41 AM
 
 Thanks, I forgot all about that. I’ll try that and get back with you.
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.. :P
1. Mike
 January 3, 2011 at 9:18 AM
 
 Reply
 
 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. Gabriel C.
 January 4, 2011 at 9:47 AM
 
 Reply
 
 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. Mike
 April 7, 2011 at 2:55 AM
 
 Reply
 
 Can you give the full source of that php function ? We are just websites owners, not developers or programmers… :-(
2. Jason Beetham
 September 14, 2012 at 5:50 PM
 
 Reply
 
 PERFECT! I am sure you just saved me about 10 hours of frustration and tons of hair.
digof
August 9, 2010 at 7:05 AM

Reply

not working in IE 8
Victor
September 22, 2010 at 8:53 AM

Reply

It’s not working on IE 8 :(
Clare
November 20, 2010 at 10:28 PM

Reply

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.
Gabriel C.
November 24, 2010 at 10:45 AM

Reply

@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.
pradeep
March 24, 2011 at 8:02 PM

Reply

$.modal.close();
is working only once…………..
for the second time it is not closing the model box by clicking on it…..
plz help me…………..
Mike
April 7, 2011 at 2:02 AM

Reply

Is it possible to launch the exit popup message just once per session ?
1. Gabriel C.
  April 8, 2011 at 3:00 AM
  
  Reply
  
  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.
Nicholas Dutson
April 21, 2011 at 12:03 PM

Reply

What needs to be done to get this to work in IE8 and IE9?
muhammad shahid
May 23, 2011 at 11:17 PM

Reply

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.
Pedro Cardoso
August 19, 2011 at 2:02 PM

Reply

This is going to sound noobish, but …. is there a simple way to implement this in a WP blog? :-/
Kayra Mills
August 31, 2011 at 4:53 AM

Reply

Nicholas Dutson have reason, not works in ie8, ie9, deadly not function there?
san pateste
August 31, 2011 at 6:12 AM

Reply

to work in ie8 must update the libraries simplemodal.js
george
April 9, 2012 at 7:10 AM

Reply

not working in ie9 :(

* = required fields

Name *
E-Mail *

(will not be published)

URL

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

Note: If you want to post CODE Snippets, please make them postable first!
(e.g.   should be converted to  )

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.

Comment *

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Creating an Exit Modal Box using the jQuery library

Related Posts

Comment via Facebook

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

Leave a Reply

Tag Cloud

Menu

To do

Suggestions

Resources