Image may be NSFW.
Clik here to view.
Have you ever wondered how to some websites create an overlay popup when they click on a link or button? Perhaps you are wondering how to create an error overlay or even a simple ad popup (not recommended since those are really annoying). Well you’re in luck. I’ll break down the basic HTML structure, CSS, and JavaScript/jQuery code as well as explain the process behind the popup overlay.
Basic HTML Structure
Here’s the basic HTML structure that we’ll use to design the popup.
[HTML]
<html>
<head>
<meta content=”width=320px, initial-scale=1, user-scalable=yes” name=”viewport” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
<script type=”text/javascript” src=”custom.js”></script>
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” />
</head>
<body>
<div class=”main-content”>
<!– Your Content Here –>
<p>Please <a class=”show-popup” href=”#” data-showpopup=”1″ >click here</a> to see the popup 1</p>
<p>Try <a class=”show-popup” href=”#” data-showpopup=”2″ >clicking here</a> to see the popup 2</p>
<p>Now try <a class=”show-popup” href=”#” data-showpopup=”3″ >clicking here</a> to see the popup 3</p>
</div>
<div class=”overlay-bg”>
</div>
<div class=”overlay-content popup1″>
<p>Oh My! This is a popup!</p>
<button class=”close-btn”>Close</button>
</div>
<div class=”overlay-content popup2″>
<p>This is the content for Popup #2</p>
<button class=”close-btn”>Close</button>
</div>
<div class=”overlay-content popup3″>
<p>This is the content for Popup #3</p>
<button class=”close-btn”>Close</button>
</div>
</body>
</html>
[/HTML]
You’ll notice that I added data-showpopup="" to the anchor tags. We will use this to show which popup we want to show depending on the class name added to the overlay-content divs.
CSS Snippet
And below is the CSS we’ll be using to style our popup overlay:
[CSS]
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: ‘Helvetica Neue’,’Helvetica’, Arial, sans-serif;
}
.main-content {
height: 800px;
width: 1000px;
margin: 0 auto;
}
.overlay-bg {
display: none;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content {
display: none;
background: #fff;
padding: 1%;
width: 40%;
position: absolute;
top: 15%;
left: 50%;
margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
.close-btn {
cursor: pointer;
border: 1px solid #333;
padding: 2% 5%;
background: #a9e7f9; /* fallback */
background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e7f9), color-stop(4%,#77d3ef), color-stop(100%,#05abe0));
background: -webkit-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: -o-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: -ms-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: linear-gradient(to bottom, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
border-radius: 4px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.close-btn:hover {
background: #05abe0;
}
/* media query for most mobile devices */
@media only screen and (min-width: 0px) and (max-width: 480px){
.overlay-content {
width: 96%;
margin: 0 2%;
left: 0;
}
}
[/CSS]
jQuery Snippet
And here’s the jQuery snippet we’ll use to trigger the popup to display (Note: I’m using jQuery version 1.9):
[JAVASCRIPT]
$(document).ready(function(){
// function to show our popups
function showPopup(whichpopup){
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you’re scrolling
$(‘.overlay-bg’).show().css({‘height’ : docHeight}); //display your popup background and set height to the page height
$(‘.popup’+whichpopup).show().css({‘top': scrollTop+20+’px’}); //show the appropriate popup and set the content 20px from the window top
}
// function to close our popups
function closePopup(){
$(‘.overlay-bg, .overlay-content’).hide(); //hide the overlay
}
// timer if we want to show a popup after a few seconds.
//get rid of this if you don’t want a popup to show up automatically
setTimeout(function() {
// Show popup3 after 2 seconds
showPopup(3);
}, 2000);
// show popup when you click on the link
$(‘.show-popup’).click(function(event){
event.preventDefault(); // disable normal link function so that it doesn’t refresh the page
var selectedPopup = $(this).data(‘showpopup’); //get the corresponding popup to show
showPopup(selectedPopup); //we’ll pass in the popup number to our showPopup() function to show which popup we want
});
// hide popup when user clicks on close button or if user clicks anywhere outside the container
$(‘.close-btn, .overlay-bg’).click(function(){
closePopup();
});
// hide the popup when user presses the esc key
$(document).keyup(function(e) {
if (e.keyCode == 27) { // if user presses esc key
closePopup();
}
});
});
[/JAVASCRIPT]
Download Source File
Source File: how-to-create-overlay-popup.zip
Conclusion
That’s it! Try it out for yourself, or create your own version of a popup overlay.
If you would like to see more of these tutorials, or maybe you have a suggestion for me, let me know in the comments below.
Update (03/25/2014)
There have been some concerns about functionality in mobile browsers when dealing with this popup overlay. I have updated the jQuery code and CSS to fix the issue.
Update (07/14/2014)
A lot of people have been asking how to show a different popup when they click on a link. I’ve updated the code and tutorial to allow you to show different content for the popup using a data binding and adding a class name to the overlay-content divs.
Update (11/3/2014)
Special thanks to Janos for figuring out a better solution to the popup overlay. I’ve adjusted the HTML, CSS, and JS to change the function of the popup overlay. Now all form inputs and links should work normally inside the popup overlay.
Update (12/1/2014)
Shout out to Matt Solomon for requesting a way for a user to press on the esc key to close the overlay. I’ve adjusted the JavaScript code to include that function.
Update (2/27/2015)
Shout out to HighOne for requesting a way to load the popup when a user first enters the page. I’ve updated the JavaScript code to include those new functions.