Modal Windows With Pure JavaScript

If you're reading this post, then you are familiar with the concept of modal windows. But just in case you aren't here's a quick recap. Modal windows in a UI context are page element containers separated from the main window and brought to the forefront for immediate action. A useful tool, now associated mainly with pop-ups and full-page takeover rolling ads that push your PC to its limits.

But they're very useful for two reasons. For one, they allow for more content on a website without requiring more space. Whenever you need them, you simply make them appear. And secondly, they allow you to control, or guide, a user on a web page. For example, let's say as a part of the signup process on your website you have to verify your email. If a user has not done so, the very next time that they login to the site, you can show them a friendly reminder that they're account is still unverified. It stands out and has an immediate "!" reaction.

Modal.js

Which is why I went ahead and created the following script for all of your modal needs. It's a 3 step process to implement, and removes any and all work from your hands. There are modal implementations in other 3rd party libraries, but from what I've seen they sometimes come at a hefty price in terms of file size and complexity. This script just does one thing. It renders a modal window and it does so in under 30 lines of code.

How it works

First off, add the script to your website.

<script type="text/javascript" src="http://www.thatsoftwaredude.com/publib/modaljs/modal.js"></script>

Add the class modaljs to any page element that you wish you modalize.

This would be any block level container.

<div class="modaljs">
    <p>This is some modal content</p>
</div>

<div class="modaljs">
    <p>And here is another</p>
</div>

These elements will be hidden on page load.

Handle the events

And now on any event which you have defined, you can simply call modaljs(identifier), with the appropriate identifier passed in, and you will have instant modality on your site.

<a href="javascript:void(0)" onclick="modaljs('#modal1', true)">
    show me the modal
</a>

All modal elements are created dynamically and once closed will be removed from the DOM automatically as well.

See it in action

Here is a quick running example for your viewing pleasure.

The CSS

Much of the style logic can be kept in the script here, but that does come with its limitations. For a seamless and clean UI experience here is a tiny CSS file to go with your new Modal script.

<link rel="stylesheet" href="http://www.thatsoftwaredude.com/publib/modaljs/modal.css" />

Sharing is caring

If you found this script useful, feel free to spread the word or to send some kind words my way. Motivation is never a bad thing. It is a very base level script that can be upgraded and updated to be much more streamlined. So feel free to use, update, share the code as long as it helps you on your coding journey in this which we call our coding life. As always, full source is down below for your copy and paste pleasure. Happy coding!

function modaljs(id) {
    var body = document.querySelector("body");
    var parent = document.querySelector(id);
    parent.style.display = "block";
    parent.classList.toggle('on');
    var bg = document.createElement("div");
    var close = document.createElement("div");
    bg.className = "modal-js-overlay";
    close.className = "modal-js-close";
    close.innerHTML = "x";
    close.addEventListener('click', function () {
        var overlay = body.querySelector(".modal-js-overlay");
        var closebtn = parent.querySelector(".modal-js-close");
        body.removeChild(overlay);
        parent.classList.toggle('on');
        parent.removeChild(closebtn);
        parent.style.display = "none";
    });
    body.appendChild(bg);
    parent.appendChild(close);
}
window.addEventListener('load', function () {
    var els = document.querySelectorAll('.modaljs');
    for (var i = 0; i < els.length; i++) {
        els[i].style.display = "none";
    }
});

.modaljs
{
    position:absolute;
    top:10%;
    padding:30px;
    border-radius:8px;
    border:solid 3px #999;
    background-color:white;
    z-index:2000;
    width:400px;
    height:100px;
    display: none;
    left: 50%;
    margin-left: -200px;
}
.modaljs.on{
    display:block;
}
.modal-js-overlay{
    background:#444;
    opacity:.8;
    position:fixed;
    top:0px;
    width:100%;
    height:1000px;
    z-index:1000;
    left:0px;
}
.modal-js-close{
    position:absolute;
    top:10px;
    right:10px;
    font-size:30pt;
    cursor:pointer
}