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:
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.
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 it’s
fixed. That will make it so it stays in once place even when a visitor scrolls.
- Easy and simple to use – plug it in and go
- Fast file transfers with SuperSpeed USB 3.0
- Compatible with USB 3.0 and USB 2.0
- Powered by USB port
- Drag and drop file saving for Windows, right out of the box.
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
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.
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. Of course, with a little CSS love, you can make it look super sexy as well.
To see the above code in action, click here. Also, if you found this article helpful, let me know in the comments or share this article!