DEV Community

Cover image for Build a Modal (Pop up) With  HTML, CSS and JavaScript
Veed - The Hood Developer
Veed - The Hood Developer

Posted on

Build a Modal (Pop up) With HTML, CSS and JavaScript

In this article I will show you how to create a modal that pops up whenever you click a button. The main focus of the article will not be on the CSS but on what you will need to achieve this functionality so feel free to copy the CSS styles.

There are three major elements you will need to achieve the modal functionality:

  1. A button to trigger the modal
  2. The modal itself (Well obviously πŸ˜…)
  3. A button to close the modal

Let's go ahead to create them in our HTML

  <body>
      <!-- button to launch the modal -->
      <button class="show-modal">Log In</button>

      <!-- the modal itself -->
      <div class="modal hidden">
         <!-- button to close the modal -->
         <button class="close-modal">&times;</button>

         <h1>Welcome back, friend😍</h1>
         <form action="">
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Password">
            <button type="submit">Log in</button>
            <p>Don't have an account? <a href="">Sign up</a></p>
         </form>
      </div>
      <div class="overlay hidden"></div>
 </body>
Enter fullscreen mode Exit fullscreen mode

We will use the class "hidden" to set the initial display of the modal to none.
Let's add our CSS and style the button triggering the modal

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #333;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-modal {
  font-size: 2rem;
  font-weight: 600;
  padding: 1.2rem 2.5rem;
  margin: 5rem 2rem;
  border: none;
  background-color: rgb(92, 22, 139);
  color: rgb(241, 241, 241);
  border-radius: 0.5rem;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

Now let's include styles for the modal and overlay

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 500px;
  background-color: white;
  padding: 4rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
  text-align: center;
}

.modal h1 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

p {
  font-size: 1.1rem;
}
a {
  text-decoration: none;
  color: rgb(2, 0, 145);
}

form input,
form button {
  display: block;
  width: 100%;
  margin: 1.3rem 0;
  border-radius: 5px;
  border: none;
  outline: none;
  padding: 1rem;
  font-size: 1.1rem;
}

form input {
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px 
  #ffffff73;
}

form button {
  background-color: rgb(2, 0, 145);
  color: #fff;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 5;
}

.close-modal {
  position: absolute;
  top: 0.8rem;
  right: 1.3rem;
  font-size: 2.5rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

/* CLASS TO HIDE MODAL */
.hidden {
  display: none;
}

Enter fullscreen mode Exit fullscreen mode

That's all for our HTML and CSS.
The first thing we need to do in our JavaScript is to select the elements we need as I mentioned earlier.

const modal = document.querySelector(".modal"); //selects the modal
const btnCloseModal = document.querySelector(".close-modal"); //selects the button to close the modal
const btnOpenModal = document.querySelector(".show-modal"); //selects the button to show the modal
const overlay = document.querySelector(".overlay"); //selects the overlay
Enter fullscreen mode Exit fullscreen mode

Next, we create a function that adds or removes the class "hidden" that we used to hide the modal and overlay.

const toggleModal = function () {
  modal.classList.toggle("hidden");
  overlay.classList.toggle("hidden");
};
Enter fullscreen mode Exit fullscreen mode

The method classList.toggle() takes a CSS class name and adds it to the specified element if the class is not present and removes the class from the element if it is present.

Next, we want that function toggleModal to run. It will remove the hidden class when the show-modal button is clicked, add the class the close-modal button is clicked and when the user clicks outside the modal (the overlay). We can achieve that by using the addEventListener() method on the elements we selected.

btnOpenModal.addEventListener("click", toggleModal);

btnCloseModal.addEventListener("click", toggleModal);

overlay.addEventListener("click", toggleModal);
Enter fullscreen mode Exit fullscreen mode

That's all! We now have a fully functional Log In modal.Alt Text

You can test it live via codepen https://codepen.io/veed_/pen/QWgLvYb . Hope you found this helpful.

Discussion (18)

Collapse
genakalinovskiy profile image
Gena Kainovskiy • Edited

Good, what do you think about improving your example and to add a11y supporting?

Collapse
veedjohnson profile image
Veed - The Hood Developer Author • Edited

Thank you sir. I'll work on including that and update on the codepen 😊

Collapse
ashleyjsheridan profile image
Ashley Sheridan

This has a few accessibility concerns:

  • Keyboard navigation, can't be dismissed by hitting the escape key
  • Focus isn't moved to the modal when it's opened
  • Focus isn't trapped in the modal, so anyone can tab out to the content beneath
  • Focus isn't returned to the button that triggered it, so keyboard users would be left lost once the modal is dismissed
  • Could benefit from some focus styles on the form elements to give feedback to the user where they're at
Collapse
bushbass profile image
Alex Nielsen

Thank you for the great demo. Is the overlay just there so you can close the modal by clicking outstide the modal or does it serve some other purpose?

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

You're welcome Alex. Asides that, the overlay also makes the modal more visible. If there were many content on the page, the overlay will blur out other contents making the whole focus on the modal itself

Collapse
bushbass profile image
Alex Nielsen

yes, that makes sense. thanks again

Collapse
aatmaj profile image
Aatmaj

That is just super!

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

Thank you

Collapse
wommy profile image
Tommy Williams

why didn't you use html's dialog tag

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

The dialog tag isn't supported on browsers like Safari. You need to lookout for that πŸ‘πŸΎ

Collapse
megasanjay profile image
Sanjay Soundarajan

Nice work. Adding some transtitions in so that the modal appearance wouldn't be as abrupt could be a nice touch.

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

Thank you nice idea Sanjay πŸ‘πŸΎ

Collapse
meo3w profile image
Phil Hasenkamp

Well done!

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

Thank you

Collapse
vishuss7 profile image
Vishuss7

What is a modal?

Collapse
tranduythoai14 profile image
teemo_14

thank you, great post

Collapse
veedjohnson profile image
Veed - The Hood Developer Author

Thanks I appreciate πŸ‘πŸΎ