ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design

Modal Windows With Pure JavaScript

Written by
Published on
Modified on
Filed under
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.

The Only Way To Handle Modals In JavaScript (Modal.js)

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.

Hello world

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!

View Full Source
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.

Comments

No messages posted yet

Developer Poll

Q:

Stay up to date

Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.

Add a comment

Keep me up to date on the latest programming news
Add Comment

Stay up to date

Get informed of the latest happenings in the programming world.

No thanks