Unobstrusive jQuery Popup Box
This jQuery article is going to focus on how to make a jQuery pop-up box that displays once when the user's mouse leaves the browsing area. In the actual application of this box, I created a popup box that notifies the user of a newletter signup form, but you use it to display just about anything!
Having said that, let's get started!
First, let's establish the CSS
#popUp {
background-color: #666666;
height: 100%;
min-width: 650px;
height: 290px;
}
#puText {
color: #000000;
background: white;
width: 88%;
height: 210px;
margin: 0px auto 10px 20px;
padding: 20px;
float: left;
}
.h1popup {
color: #388447;
font-size: 22px;
margin-top: 10px;
text-shadow: black 0.01em 0.01em 0.02em
}
.h2popup {
color: #666666;
margin-top: 10px;
font-size: 15px;
}
.h2popup a {
color: #24AB56;
}
.inputbox {
margin-top: 5px;
}
input {
display: inline;
float: left;
margin-left: 5px;
}
The next step is going to be to create the jQuery code that monitors the mouse and binds an event to when the mouse leaves the browser display area. Which is exactly what the snippet of code below does, oddly enough.
We want to set the number of times the box has been displayed to zero when the page is loaded. Then we'll add an event listener to execute the code.
var counter = 0;
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window,"load",function(e) {
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
//Show the news popup if this is the first time the user left the page
if ((!from || from.nodeName == "HTML")&&(counter < 2)) {
//Increment counter
counter++;
moveLeft = $(window).width() / 4;
popupWidth = $(window).width() / 2.5;
popupHeight = $(window).height() / 3;
textboxHeight = popupHeight - 20;
$('#popUp').css('visibility', 'visible').css('position', 'fixed').css('top', '10px').css('marginLeft', moveLeft + 'px').css('width', popupWidth + 'px');
}
});
});
Good, now that we've established the code, and how to manipulate the popup box (also known as our div with id of popUp) let's write the function that will close the popup box when the user clicks the x, or alternately, presses escape
/** Close the popup **/
function closePopup() {
$('#popUp').fadeOut(200);
$('#popUp').delay(200).css('visibility', 'hidden');
$('#popUp').delay(200).css('top', '-999px');
$('#popUp').delay(200).css('left', '-999px');
}
Great, now let's go ahead and create the listeners when the document is loaded and ready to go. Here we will tell jQuery what to actually do when the user clicks on the X and presses the escape
$(document).ready(function() {
//Close on click
$(document).on('click', '#closePopup', function(event){
closePopup();
$("#mainDiv").html(moveLeft);
});
//Close on esc key press
$(document).on('keyup', function(event) {
if(event.keyCode == 27)
closePopup();
});
});
</script>
Hang in there, we're almost done! We will also want to be able to format the box itself that will show the content of the box itself
<img id="closePopup" src="/images/close_popup.png" style="float: right; width: 20px; cursor: pointer;">
<IMG SRC="/images/logo.png" width="140px">
<IMG SRC="/images/stories/phone_number.png" width="200px">
<h1 class="h1popup">Wait! Sign Up for our company Newsletter</h1>
Don't miss out on exclusive offers, information and money saving tips!
Form signup here
<h2 class="h2popup">Not ready to take the next step? <A HREF="rss_feed_link" target="new">Subscribe to our RSS feed</A></h2>
Got it? Good! Here's the code in its entirety ... happy coding!
<script type="text/javascript">
var counter = 0;
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
}
addEvent(window,"load",function(e) {
addEvent(document, "mouseout", function(e) {
e = e ? e : window.event;
var from = e.relatedTarget || e.toElement;
//Show the news popup if this is the first time the user left the page
if ((!from || from.nodeName == "HTML")&&(counter < 2)) {
//Increment counter
counter++;
moveLeft = $(window).width() / 4;
popupWidth = $(window).width() / 2.5;
popupHeight = $(window).height() / 3;
textboxHeight = popupHeight - 20;
$('#popUp').css('visibility', 'visible').css('position', 'fixed').css('top', '10px').css('marginLeft', moveLeft + 'px').css('width', popupWidth + 'px');
}
});
});
/** Close the popup **/
function closePopup() {
$('#popUp').fadeOut(200);
$('#popUp').delay(200).css('visibility', 'hidden');
$('#popUp').delay(200).css('top', '-999px');
$('#popUp').delay(200).css('left', '-999px');
}
$(document).ready(function() {
//Close on click
$(document).on('click', '#closePopup', function(event){
closePopup();
$("#mainDiv").html(moveLeft);
});
//Close on esc key press
$(document).on('keyup', function(event) {
if(event.keyCode == 27)
closePopup();
});
});
</script>
<img id="closePopup" src="/images/close_popup.png" style="float: right; width: 20px; cursor: pointer;">
<IMG SRC="/images/logo.png" width="140px">
<IMG SRC="/images/stories/phone_number.png" width="200px">
<h1 class="h1popup">Wait! Sign Up for our Company's Newsletter</h1>
Don't miss out on exclusive offers, information and money saving tips!
Form Goes here
<h2 class="h2popup">Not ready to take the next step? <A HREF="rss_feed" target="new">Subscribe to our RSS feed</A></h2>