Streamline Your Modals

Modals are a great way for focusing the user's attention. Almost every site has some variation of a modal or popup message or dialog box. Here let's look at creating one using regular vanilla javascript and a little bit of css. It should be noted that there are many ways to actually render one. In my opinion, one of the simplest approaches is to output the markup and add in the hooks to listen for clicks to trigger the modal.

First things first, let's start with the modal HTML.

<div class="modal">
  <div class="bg" />
  <div class="box">
    <button class="close-button" aria-label="Close">X</button>
    <div class="content">
      Whatever you want to put goes here
    </div>
  </div>
</div>

Let's look at each of the elements

1. A root element with a class of modal that will encapsulate all other elements

2. A background elment with a class of bg which we will give a dark transparent background color

3. An element with a box class which will hold our modal actual interactive modal elements.

4. A close button and the actual container for our content

Next let's look at the styling

.modal {
    opacity: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: 500ms ease;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(59,63,64,.6);
}

.box {
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 476px;
    box-shadow: 0 4px 30px 0 rgba(0,0,0,.08),0 6px 12px 0 rgba(0,0,0,.18);
    position: fixed;
    background: #fff;
    transform: translateY(calc(-50% + 100px));
    transition: 500ms ease;
    top: 50%;
}

.close-button {
   position: absolute;
    top: 10px;
    right: 10px;
    color: #000;
    font-size: 24px;
    transition: opacity .3s ease 
}

.content {
    max-height: 90vh;
    overflow: auto;
}

Things to note about this

• We give the modal a fixed class and have it stretch to fill the viewport

• We also give the modal a property of opacity: 0; Which means the modal will not be visible on the page. You can change this to a 1 to develop so you can see it for now.

• We give the modal a property of pointer-events: none; This tells the browser to ignore all events directed at the modal element. As this modal is covering the entire viewport and is on top of other elements given its fixed position, this property is very important. If this wasn't there then all of your clicks would be consumed by the modal element.

• There are various transition properties. This will help us animate the modal.

• translateY(calc(-50% + 100px)) This line will allow us to center the modal. However we offset it by 100px. That way we can trigger an animation towards the center of the screen.

• Feel free to play around with the overall width and height of the modal. I arbitrarily gave it a width of 476px

So what have we done so far. We've created a simple fixed element that sits on top of everything else in the viewport. It is currently not visible due to its 0 opacity and not accepting any click events.

The javascript is pretty simple. We can toggle the modal by just adding a class to the root modal element.

var modalElement = document.querySelector('.modal');
var modalTrigger = document.querySelector('.modal-trigger');
var closeButton = document.querySelector('.close-button');
var modalBackground = document.querySelector('.bg');

function toggleModal() {
    modalElement.classList.toggle('open');
}

modalTrigger.addEventListener('click', toggleModal);
closeButton.addEventListener('click', toggleModal);
modalBackground.addEventListener('click', toggleModal);

Things to note

• Here we are querying the element of all the items that will receive a click. And attaching the toggleModal() function.

• The modalTrigger element is simply the element or button that will show the modal.

• We are attaching events to the modal close button as well as the background element. In case they click the background to close the modal

After opening the modal, our HTML will look like the following

<div class="modal open">

Now that is has an open class, let's add some additional css to actually show the modal.

.modal.open {
  pointer-events: auto;
  opacity: 1;
}

.modal.open .box {
   transform: translateY(-50%); 
}

• We add opacity: 1; to the modal to have it fade in.

• Pointer-events: auto; ensures that the modal is now clickable.

• We resort transform: translateY(-50%) to have the modal slide up to the center when it appears. Giving a nice little animation

And that's it! Closing the modal simply means removing the open class and the animations will play out again.