Learn to Code via Tutorials on Repl.it!

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

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.

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

Comments
hotnewtop
codingjlu (170)

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 (170)

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