This is NOT a tutorial on how to learn HTML, CSS and JS and requires a brief understanding of them.
Get started: HTML
First, create a HTML, CSS, JS repl or use a webserver of your choice. Next, open the HTML file. Type ! and then press tab to fill out a basic HTML boilerplate. In the body of the document, add a button, like so.
We'll use this button to open the popup. Next, we'll create a structure of div elements with a button in one of them like this:
That's all the HTML we'll be needing!
The juicy bit: CSS
The CSS is the most important part of building a popup. First, we'll begin by styling the
popup_background. I'll comment in the CSS to help you understand. Remember that this is the background/overlay, not the popup itself
Now that we've finished styling the background, we can move on to the popup box itself, which is a bit easier.
This bit is really easy. I mean really easy. First, create a script tag and enter the following:
If you have any issue understanding this tutorial or find an issue with it, please comment it below and I'll be happy to help.