External popups often connote horrible ideas of advertisements and annoyance, and in general the web design community will try to sway you never to use a popup. At the same time though, an inline popup can give the user more information about something or give the user some options depending on what they clicked, while not being a nuisance since it is usually initiated by the user. In this tutorial we’re going to be making some twitter-style inline popups, which of course, can be styled to your liking.
What we want
What we effectively want is a box to popup in the middle of the screen when someone clicks on a certain (tagged) item. It should have a close button, and when you click outside the block it should close automatically. Additionally, when the box pops up the background should fade out to concentrate the user on the popup.
Lets Start
We’re going to be using CSS and jQuery, and of course, a little bit of HTML. The HTML is pretty simple. We just need a link with a class and a div with a id which relates to the link. For example:
<a class="popup-link-1" href="">Click me</a> <div class="popup-box" id="popup-box-1"> <div class="close">X</div> <div class="top"> <h2>Some Title Goes Here:</h2> </div> <div class="bottom"> Some more content, for when you want to add a little bit more </div> </div>
Notice how the class and ID have the same number appended to the end. This is what we’re going to use to relate the two elements. Before we jump into the jQuery, lets add some simple CSS to the popup.
.popup-box {
position: absolute;
border-radius: 5px;
background: #fff;
display: none;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
z-index: 9999999;
font-size: 14px;
}
.popup-box .close {
position: absolute;
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
cursor: pointer;
color: #434343;
padding: 20px;
font-size: 20px;
}
.popup-box .close:hover {
color: #000;
}
.popup-box h2 {
padding: 0;
margin: 0;
font-size: 18px;
}
.popup-box .top {
padding: 20px;
}
.popup-box .bottom {
background: #eee;
border-top: 1px solid #e5e5e5;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#blackout {
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
overflow: hidden;
z-index: 999999;
left: 0;
display: none;
}
We’ll define some other CSS in the Javascript as it’s dependant on properties that can’t be defined in only CSS. Lets move on to the Javascript.
jQuery!
To begin, include your jQuery file and the Javascript file where you intend to put the jQuery code we’re going to be writing. Alternatively you can add the Javascript inline (like I will be doing), but if you’re using this in real life that’s probably not a great idea. To start, initiate jQuery and append the div #blackout to the body of the document. Oh, and I also defined the width of the popup in the Javascript so you don’t have to switch back to CSS all the time.
<script type="text/javascript" src="/jquery.js"></script>
$(document).ready(function() {
$('body').append('<div id="blackout"></div>');
var boxWidth = 400;
Next up, create a function which centers the popup. Since we set position to absolute earlier in the CSS, we couldn’t really use margin: 0px auto; so we have to get the width of the screen, take away the width of the popup and divide that all by 2. The height offset should be the current scroll position plus about 150px.
Remember we initially made the #blackout div? Since it’s supposed to blackout the rest of the content, we need to ensure that it’s the full width and height of the document, and that is also calculated in this function.
function centerBox() {
/* Preliminary information */
var winWidth = $(window).width();
var winHeight = $(document).height();
var scrollPos = $(window).scrollTop();
/* Calculate positions */
var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 150;
/* Move stuff about */
$('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
$('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
return false;
}
This function has to be ran 3 times. When the user scrolls, when the user resizes the window, and initially when the user loads the page.
$(window).resize(centerBox); $(window).scroll(centerBox); centerBox();
Finally we need to do some things when the user clicks things. When the user clicks outside the box it should close. When the user clicks on the ‘X’ the box should close, and when the user clicks inside the box nothing should happen. I’ve commented the code, so if you get stuck that should help:
$('[class*=popup-link]').click(function(e) {
/* Prevent default actions */
e.preventDefault();
e.stopPropagation();
/* Get the id (the number appended to the end of the classes) */
var name = $(this).attr('class');
var id = name[name.length - 1];
var scrollPos = $(window).scrollTop();
/* Show the correct popup box, show the blackout and disable scrolling */
$('#popup-box-'+id).show();
$('#blackout').show();
$('html,body').css('overflow', 'hidden');
/* Fixes a bug in Firefox */
$('html').scrollTop(scrollPos);
});
$('[class*=popup-box]').click(function(e) {
/* Stop the link working normally on click if it's linked to a popup */
e.stopPropagation();
});
$('html').click(function() {
var scrollPos = $(window).scrollTop();
/* Hide the popup and blackout when clicking outside the popup */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
$('.close').click(function() {
var scrollPos = $(window).scrollTop();
/* Similarly, hide the popup and blackout when the user clicks close */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
});
And that’s it! Now we can add internal popups to webpages whenever we want! Click the demo to see an example (on this page), or click the download button to get the files on your computer.
