Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to create a popup in HTML, CSS and JavaScript.
h
xfinnbar (211)

Disclaimer

This is NOT a tutorial on how to learn HTML, CSS and JS and requires a brief understanding of them.

End result

Once you've completed this guide, you should have a popup that looks something like this:

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.

Making it work: JavaScript

This bit is really easy. I mean really easy. First, create a script tag and enter the following:

Final notes

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.

Comments
hotnewtop
codingjlu (492)

You shouldn't nest the modal in the background, because for accessibility when you click on the background it should also close the popup, and what you did makes it really hard.

codingjlu (492)

Why not block or inline? We use display: flex; because that's the only way the align-items and justify-content properties will work.

I don't get it. Just set the position to absolute...