Now that we have our structure and styling in place, it’s now time to add the functionality with jQuery. That will make it so it stays in once place even when a visitor scrolls. You’ll notice that we’ve set its position to fixed. 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. We’ll also style the button just to make it pretty. 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. Second, it should fill up the entire screen.
First, we will want it to have a semi-transparent background (so we can still see the website behind it). Styling the overlay with CSSįor this popup, there are three major styling components that we’ll want to tackle. Again, we will use this in our jQuery function. Additionally, we’ve added a inside the popup with an id of close. We will use this when we write our jQuery function. First, we’ve given the button tag and id of trigger. We’ll also include our jQuery file since we’ll need that later. This element can be anything, a button, a link, an image, etc. Getting started with your popup overlayįirst of all, we need an html page on which our popup will live, and an element that is going to trigger our popup.
A popup may very well be the way to go. Fortunately, a popup is a simple feature to implement. 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 with a subscription form might be a good way to go about it. Let’s say you want to try and get more of your visitors to sign up for your email blast or newsletter. 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.
0 kommentar(er)
