How to create a Modal

The theme for week #9 of the Weekly Coding Challenge is:

Modal

We have another one of the main components that is found on most of the websites. A modal is used to attract the users attention to some special information that you want to highlight.

It's best to make sure that the information presented in the modal is really important otherwise it might annoy the users and they'll close it in a heartbeat without reading the information or even worse, they'll leave the website.

In this article we're going to build this modal (Live on Codepen):

https://codepen.io/FlorinPop17/pen/qwwmaw

Let's get into it!

The HTML

There are 4 main components for a modal to work properly:

1. the opening button
2. the .modal-wrapper
3. the .modal
4. the closing button

Number 1. and 4. are pretty obvious, these are the buttons that will be used to open and close the modal.

The .modal-wrapper is a div that will be positioned fixed and it will have a slight black overlay and it will hold (wrap around) the .modal component - this will be positioned in the center of the screen. It'll get more clear when we'll see the HTML:

<button id="openModalBtn">Open Modal</button>

<div class="modal-wrapper" id="modal">
    <div class="modal">
        <div class="modal-header">
            <h3>Modal Header</h3>
        </div>
        <div class="modal-body">
            <h4>Modal Body</h4>
            <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Quaerat, enim. Cupiditate, ab? Atque ut soluta fugit repellat
                perferendis mollitia. Omnis.
            </p>
        </div>
        <div class="modal-footer">
            <button id="closeModalBtn">Close</button>
        </div>
    </div>
</div>

As you can see the .modal-wrapper also has an id of: #modal - this is because we will target it using JavaScript and we will toggle an .open class on it in order to be able to show and hide it.

In this .modal we also have 3 containers: .modal-header, .modal-body and .modal-footer. I added these just to style the modal a little bit. Let's see how we'll do that next...

The CSS

First, the buttons styling:

button {
    background-image: linear-gradient(to right, #015ad1, #1748bc);
    border-radius: 50px;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    padding: 10px 25px;
    transition: all 0.1s ease-in-out;
}

button:active {
    opacity: 0.8;
}

button:focus {
    outline: none;
    box-shadow: 0 0 1px 2px #015ad1;
}

Few things I want to point out here about the buttons:

• they have a slight gradient;
• there is a smooth on click effect on the :active selector;
• I don't like the default outline on the button when it's :focused so I removed it and I used a box-shadow instead;

Good, now for the modal and all it's components:

.modal-wrapper {
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.3s ease-in-out;
    z-index: -1;
}

.modal-wrapper.open {
    opacity: 1;
    z-index: 999;
}

.modal {
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 380px;
    max-width: 95%;
}

.modal-header {
    background: #015ad1;
    background-image: linear-gradient(to right, #015ad1, #1748bc);
    color: #fff;
    padding: 15px 0;
}

.modal-header h3 {
    margin: 0;
}

.modal-body {
    padding: 15px 20px;
}

.modal-body h4 {
    margin: 0;
}

.modal-body p {
    letter-spacing: 0.5px;
    line-height: 24px;
    margin: 10px 0 0;
}

.modal-footer {
    background-color: #eee;
    padding: 15px 0;
}

As mentioned above, the .modal-wrapper is an overlay with a slight black background color and it has a fixed position - this is to make it span across the entire viewport size.

Also, the key styling here is the .modal-wrapper.open selector - this is used to show the modal by changing the opacity and z-index properties. By default the modal is hidden.

Other than these, everything is pretty straightforward. 😉

For the last piece we have...

The JavaScript

const openBtn = document.getElementById('openModalBtn');
const closeBtn = document.getElementById('closeModalBtn');
const modal = document.getElementById('modal');

openBtn.addEventListener('click', () => {
    modal.classList.add('open');
});

closeBtn.addEventListener('click', () => {
    modal.classList.remove('open');
});

Nothing fancy... we just target the buttons and the modal and by using the addEventListener method we add a click event. Within it we add and remove the .open class from the .modal-wrapper. The rest is history! 😄

Conclusion

Yet another simple component to build, I hope you had fun going over this tutorial. Let me know if there is anything that you found the be confusing, I'll answer your questions gladly!

I'm very curious what things you could add on top of this modal component in order to make it better! As always: BE CREATIVE!! 😉

Happy Coding! 😇