Vanilla JavaScript Modal with multiple open/close handlers
Tags: javascript, frontend, modal, html
Published: 2021-02-04 21:58:20

In this post I want to show how we can easily create a modal with vanilla JavaScript. It can have multiple open/close handlers thanks to **querySelectorAll**.

First of all lets create the HTML structure for our modal.
```html
<div class="modal">
  <span class="modal-backdrop"></span>
  <div class="modal-content">
    <div class="modal-header">
      <h2 class="modal-title">Modal Title</h2><button class="close-modal">&times</button>
    </div>
    <div class="modal-body">
      <h3>Modal body</h3>
      <p>Modal body text</p>
    </div>
    <div class="modal-footer">
      <button class="close-modal">Ok</button>
      <button class="close-modal">Cancel</button>
    </div>
  </div>
</div>
```

Now lets add some style.
```css
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2rem;
  position: fixed;
  width: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}
.modal .modal-backdrop {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: fixed;
}
.modal .modal-content {
  background: #fff;
  border-radius: 5px;
  max-width: 600px;
  position: fixed;
  top: -100%;
  transition: all 0.6s ease;
  z-index: 1000;
}
.modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 1.5rem;
}
.modal .modal-header .close-modal {
  font-size: 2rem;
  padding: 0;
  margin: 0;
  height: 30px;
  width: 30px;
  text-align: center;
}
.modal .modal-header .close-modal:hover {
  color: #000;
}
.modal .modal-body {
  padding: 1.5rem;
}
.modal .modal-footer {
  border-top: 1px solid #ccc;
  padding: 1rem;
  text-align: right;
}
```

Notice that 3 attributes on *.modal* class.
```css
.modal {
  ...
  top: 0;
  visibility: hidden;
  opacity: 0;
}
```
It will keep the modal hidden by default, later we will use JavaScript to add a *.visible* class to make our modal appear on the screen.

## Time to JavasCript
Finally lets write some JavaScript code to give interaction to the modal.

We begin finding what we need to interact in the DOM.
```js
const modal = document.querySelector('.modal'),
      openHandlers = document.querySelectorAll('.open-modal'),
      closeHandlers = document.querySelectorAll('.close-modal');
```

Now we loop through our open and close handlers to add it a **click** eventListener.
```js
openHandlers.forEach(openHandler => {
  openHandler.addEventListener('click', openModal)
});

closeHandlers.forEach(closeHandler => {
  closeHandler.addEventListener('click', closeModal)
});
```

We added a call to an open and and close functions when the click event gets fired. Lets create these two.
```js
function openModal() {
  modal.classList.add('visible');
}

function closeModal() {
  modal.classList.remove('visible');
}
```
When our **openModal** function gets fired, we simply add a class *.visible* to the main *.modal* class.
So we can toggle its visibility with CSS.
```css
.modal.visible {
  opacity: 1;
  visibility: visible;
}
.modal.visible .modal-content {
  top: 25%;
}
```
Notice the ```top: 25%```
It's just to add some cool animation in out.

Thats all we need and our modal is ready. 
Vanilla JavaScript is pretty easy nowadays, in the past it would be a pain in the ass to make such a simple thing.

Check the [demo](https://codepen.io/dantewebmaster/pen/Yabpmr?editors=0010) on codepen to see it in action.