Search  
RU EN

Vanilla JavaScript modal with multiple open/close handlers

Author:
Source:
Views:
1368
Vanilla JavaScript modal with multiple open/close handlers favorites 0

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.

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

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

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

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.

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.

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.

.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 on codepen to see it in action.

Files

Similar
Apr 29, 2023
Author: Joel Olawanle
JavaScript is a versatile programming language that allows developers to create dynamic and interactive web applications. One common task in web development is to refresh or reload a web page, either to update its content or to trigger certain actions....
Oct 1, 2018
Some time ago we published an article with a comparison of Angular 2 and React. In that article, we showed pros and cons of these frameworks and suggested what to choose in 2017 for particular purposes. So, what is the...
27 мая 2024 г.
Автор: Марина Александровна
Уверены, что вопросы на собеседовании frontend — настоящая боль? Мы взяли на себя поиск наиболее популярных и дали на них развёрнутые ответы. Казалось бы, вопросы на собеседовании frontend разработчика Junior не должны отличаться от стандартных задачек с IT-сайтов. Даже мы...
Feb 26, 2023
Author: Ian Segers
Error handling with Async/Await in JS This will be a small article, based on some issues I picked up during code reviews and discussions with other developers. This article is rather focused on the novice JS developers. A Simple Try...
Send message
Type
Email
Your name
*Message