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.
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.
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.
As you can see by the code above, we have one script for opening the popup and one for closing it.
You can change the timing and animation speed using the numbers next to the fadeIn and fadeOut.
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.