DEV Community

Cover image for How to build a Modal
Jay Cruz
Jay Cruz

Posted on

6

How to build a Modal

A brief tutorial on how to build a modal using Javascript, HTML, and CSS.

What’s a modal?

Modals are pop-up windows or dialog boxes that display some sort of content above everything else on a web page. They usually are triggered by an event such as clicking on a button. They can also pop up automatically (which can be very annoying at times!). We’ve all probably come across one at some point while browsing the web. Many times they will display some content asking you for your email or to sign up for some sort of promotional offer. Well, today we won't be signing up for anything, we’ll be building one ourselves!

Building a Modal

To build our modal we’ll be using plain ol’ Javascript, HTML, and, CSS. To start off we’re going to set up our HTML template. We’ll need several parts to make up our modal. An outer div element that we’ll label with the id overlay. This will be the window our modal box will sit on top of. The modal will contain all of the main content we want to be displayed once the modal opens, including a close button to hide the modal. We also need a button to actually trigger the modal to be opened. Lastly, we’ll link our CSS and Javascript files.

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="overlay">
<div id="modal">
<h2>Contact Details</h2>
<p>Name: John Doe</p>
<p>Address: Lorem Ipsum st.</p>
<p>Email: johndoe@webdev.dev (no spam please!)</p>
<a id="close-modal" href="#">Close👋</a>
</div>
</div>
<h1>👇 Click for my contact details! 👇</h1>
<a id="open-modal">Contact Me 📨</a>
<script src="index.pack.js"></script>
</body>
</html>
view raw modal.html hosted with ❤ by GitHub

Now we can add some styling to make our modal more visually appealing by styling our buttons and the actual modal itself.
html, body {
margin: 0;
padding: 50px;
font-family: Roboto, Arial, Helvetica, sans-serif;
text-align: center;
}
#overlay {
display: none; /* hide modal initially */
position: absolute; /* position to allow modal to cover over it */
background: rgba(0, 0, 0, 0.1); /* gray out the background when modal appears */
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#modal {
border-radius: 15%;
background: #FFF;
margin: 0 auto; /* center the modal */
padding: 0;
width: 600px;
text-align: center;
position: relative; /* set relative to overlay position */
top: 20%;
box-shadow: 10px 5px 5px #000; /* give modal a hover effect */
}
#close-modal,
#open-modal {
display: inline-block;
cursor: pointer;
padding: 25px 20px;
background: greenyellow;
text-decoration: none;
border-radius: 50%;
}
#close-modal:hover,
#open-modal:hover {
background: gray;
color: #FFF;
}
#close-modal:focus,
#open-modal:focus {
outline: none;
}
h1, h2 {
display: block;
font-style: italic;
}
p {
margin: 35px 0;
}
view raw styles.css hosted with ❤ by GitHub

Let’s see what our closed modal is looking like so far.

Green Contact Me button

Looks great! Now we just have to hook it up using Javascript. We’ll need to listen for click events for when a user clicks the Contact Me button and when they close the modal.

const openBtn = document.getElementById("open-modal");
const closeBtn = document.getElementById("close-modal");
const modal = document.getElementById("modal");
const h1 = document.querySelector("h1");
const overlay = document.getElementById("overlay");
openModalOnClick();
closeModalOnClick();
function openModalOnClick() {
openBtn.addEventListener("click", (e) => {
// display modal on click
overlay.style.display = "block";
// remove openBtn and h1 from the dom
openBtn.style = "display: none";
h1.style = "display: none";
});
}
function closeModalOnClick() {
closeBtn.addEventListener("click", (e) => {
// close modal on click
overlay.style.display = "none";
// reset h1 and open button
openBtn.style = "display: inline-block";
h1.style = "display: inline-block";
});
}
view raw index.js hosted with ❤ by GitHub

This sets up the functionality for opening and closing our modal. Now when a user clicks on the Contact Me button our user will see the modal with all the contact details displayed.

Modal with contact details

Summary

Modals are meant to capture a user’s attention. When modals are triggered everything else on the page becomes temporarily deactivated. This creates an immediate focus on the information the modal is presenting. Sometimes this can enhance the user experience, other times it can do the exact opposite. It all depends on the use case and whether or not the modal presents useful content that’s relevant to the user.

Learn more about Modals

Top comments (1)

Collapse
 
supportic profile image
Supportic

This example raised some questions:

  1. Why do you wrap your listeners around functions?
  2. Why do you hide the H1 headline when the modal is covering it?
  3. Why do you declare the variable modal if its never used?

For future research:

  • try to make modals more accessible [ref]
  • Since your link "contact me" is rather an action than a link to something statically, the use of a button is prefered.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs