Build a Modal (Pop up) With  HTML, CSS and JavaScript
Tags: html, css, javascript, codenewbie
Published: 2021-08-21 20:29:28

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

```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>
```
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
```CSS
* {
  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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7lrf69x8e27axge23mr.jpg)

Now let's include styles for the modal and overlay
```CSS
.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;
}

```
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.
```Javascript
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
```
Next, we create a function that adds or removes the class "hidden" that we used to hide the modal and overlay.
```Javascript
const toggleModal = function () {
  modal.classList.toggle("hidden");
  overlay.classList.toggle("hidden");
};
```
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.
```Javascript
btnOpenModal.addEventListener("click", toggleModal);

btnCloseModal.addEventListener("click", toggleModal);

overlay.addEventListener("click", toggleModal);
```
That's all! We now have a fully functional Log In modal.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofbqg7oxp8f0ffd6p75x.jpg)

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