Posted by This is a very simple popup made using only CSS and Javascript(jQuery) you could very easily implement this into any project.
I made this popup a long while back, but have been using ever since because its so simple and easy to implement into websites. The only requirement is including jQuery in your project and you’re good to go.
HTML Structure
See the Pen Lets pop up with CSS and jQuery by Luke Dowding (@LukeD1uk) on CodePen.0
You’ll notice that the Overlay and Popup are on the same level, not nested inside each other. This is so that you can put the popup above the overlay, without interfering with clicks. If the popup was inside the overlay, you wouldn’t be able to click the popup without clicking the overlay itself. Its done this way so we can click the popup separetly from the overlay. We will use CSS to position the overlay behind the popup.
CSS
See the Pen Lets pop up with CSS and jQuery by Luke Dowding (@LukeD1uk) on CodePen.0
The important part here is the Overlay and Popup classes, both are positions fixed and both have a z-index of 1 and 2 (the higher the number the closer it will be towards you). Its good practice to avoid using z-index number like 99999, if you keep the z-index under control from the start you’ll have yourself some headaches.
The Overlay is simple a black background with lowered opacity. RGBA works the same as RGB except the 4th value is the opacity(alpha).
The Popup is a simple little box, using the 50% position and then transforming -50% horizontal, this keeps the div centered horizontally.
Its important that both the Overlay and Popup are hidden initially, we will use Javascript to show these. so make sure both have Display set to None.
Javascript/jQuery
See the Pen Lets pop up with CSS and jQuery by Luke Dowding (@LukeD1uk) on CodePen.0
As you can see by the code above, we have one script for opening the popup and one for closing it.
You click on the class .letspop and it will use the Javascript Fade In animation to set the CSS display value from None to Display. Then once the pop is open the divs with the classes Overlay and Close are visible and the user can click those to trigger the second script which closed the popup and the overlay. simple right?
You can change the timing and animation speed using the numbers next to the fadeIn and fadeOut.
The Result
See the Pen Lets pop up with CSS and jQuery by Luke Dowding (@LukeD1uk) on CodePen.0
The results are as simple as the code. A working popup good for what ever you do, this method can be applied to many other things not just popups. Any time you need to show something on a click you could use this method to do so.
Thanks for reading.