Skip to content
← Back to Community
How to create a popup in HTML, CSS and JavaScript.
Profile icon
xfinnbar

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:
image
image

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.

<button onclick="openPopup()">Open popup</button>

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:

<div class="popup_background" id="popup_background"> <div class="popup" id="popup"> <!--Any content of the popup you want here, eg. <p>Hello, popup world!</p>.--> <button onclick="closePopup()">Close popup</button> </div> </div>

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

<style> .popup_background { display: none; /* Make the popup hidden by default */ position: fixed; /* Ignores scrolling, allows pixel-based positioning */ top: 0; left: 0; /* Move the div to the top left of the screen. We'll make it cover the whole screen soon. */ background-color: rgba(0, 0, 0, 0.5); /* Transparent background, 0.5 is opacity (1 = 100%) */ width: 100vw; height: 100vh; /* vw = Viewport width, vh = Viewport height */ align-items: center; justify-content: center; /* Center all child elements (in this case, a div) if you think we need display: flex, we will be changing the display property with JS later */ } </style>

Now that we've finished styling the background, we can move on to the popup box itself, which is a bit easier.

<style> /* Put this after all the stuff we did before, in the same style tag. */ .popup { background-color: white; /* White background, pretty self explanatory. */ text-align: center; /* Center the text inside the popup. */ padding: 20px; /* Make a bit of room around the text. */ border-radius: 5px; /* Round the corners of the popup. */ } </style>

Making it work: JavaScript

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

<script> function openPopup() { document.getElementById("popup_background") // Select the popup background .style.display = "flex"; // Change its display property to flex. // Why not block or inline? We use display: flex; because that's the only way the align-items and justify-content properties will work. } function closePopup() { document.getElementById("popup_background") // Select the popup background .style.display = "none"; // Change its display property to none, therefore it will be invisible. } </script>

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.

Voters
Profile icon
RxlFajarz
Profile icon
programmeruser
Profile icon
DynamicSquid
Profile icon
xfinnbar
Comments
hotnewtop
Profile icon
DynamicSquid

Nice!

Profile icon
codingjlu

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.

Profile icon
codingjlu

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...