A popup overlay can be a useful (or annoying depending on who you ask, but for the sake of this article, let’s go with useful) tool if used correctly on your website. Let’s say you want to try and get more of your visitors to sign up for your email blast or newsletter. A popup with a subscription form might be a good way to go about it. Or perhaps you have a gallery of images or videos on your website and you want visitors to be able to click for a closer look. A popup may very well be the way to go. Fortunately, a popup is a simple feature to implement.
Getting started with your popup overlay
First of all, we need an html page on which our popup will live, and an element that is going to trigger our popup. This element can be anything, a button, a link, an image, etc. For this example, let’s use a button. We’ll also include our jQuery file since we’ll need that later. Here’s what our page will look like:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<head>
<body>
<button id="trigger">Click me</button>
<div id="overlay">
<div id="popup">
<div id="close">X</div>
<h2>This is a popup</h2>
<p>You just triggered a popup</p>
</div>
</div>
<body>
</html>
There are a few items of note here. First, we’ve given the button tag and id of trigger. We will use this when we write our jQuery function. Additionally, we’ve added a <div> inside the popup with an id of close. Again, we will use this in our jQuery function.
Styling the overlay with CSS
For this popup, there are three major styling components that we’ll want to tackle. First, we will want it to have a semi-transparent background (so we can still see the website behind it). Second, it should fill up the entire screen. Third, it should remain in a fixed position so that when a visitor tries to scroll with the popup active, the website behind will scroll, the the popup will remain in place. We’ll also style the button just to make it pretty.
button {
background: #000;
color: #fff;
text-align: center;
font-weight: bold;
padding: 10px 30px;
border-radius: 3px;
}
#overlay {
position: fixed;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
display: none;
}
#popup {
max-width: 600px;
width: 80%;
max-height: 300px;
height: 80%;
padding: 20px;
position: relative;
background: #fff;
margin: 20px auto;
}
#close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #000;
}
That’s all you need for basic styling. We’ve set the overlay to display: none so that it’s not visible until it’s triggered and also given it a semi-transparent background with rgba(0,0,0,0.8) which is the RGB value of black at 80% opacity. You’ll notice that we’ve set its position to fixed. That will make it so it stays in once place even when a visitor scrolls.
Making it all work with jQuery
Now that we have our structure and styling in place, it’s now time to add the functionality with jQuery. We are going to use the trigger and close id’s from above and incorporate them into our functions so jQuery knows which elements should be used to perform the action. In this case, we will be using click() as our action.
$(document).ready(function() {
$('#trigger').click(function() {
$('#overlay').fadeIn(300);
});
$('#close').click(function() {
$('#overlay').fadeOut(300);
});
});
Not too complex at all. What the above does is when the element with an id of trigger is clicked, the element with an id of overlay will fade in and will take 300 milliseconds to do it. Same thing with the close element, only in reverse.
We’re done. That’s all it takes to have a functioning popup overlay.
