10 Free JavaScript Modal Window Plugins
You can find plenty of pure CSS modals but these don’t offer the same control as JavaScript. With a JavaScript modal, you can add custom animations, UI inputs, and really enhance the user experience.
But, why design something from scratch when you can use a JS library? I have collected the best free JavaScript-powered modal scripts here for you to peruse and single out your favorites.
All of these are completely free and open-source, so you can edit the code and restyle them to fit your site as needed.
Read Also: How to Create Effective Popups For Your Online Store
1. Tingle
One of my favorite free modal scripts is Tingle.js. It’s built on vanilla JavaScript with no dependencies, so you don’t need any jQuery or Zepto libraries.
Plus, it’s a fairly small library, although it does have a lot of options for customization. You can change the CSS transitions, the JavaScript modal animations, and the whole user experience with just a few settings.
Tingle.js is designed to be fully accessible and responsive, so it works on mobile devices and supports older browsers, too.
You can see all the documentation on GitHub, along with the free source code. They also have a demo link, so you can check out Tingle in action to see if it could fit on your website.
2. Vanilla Modal
Here’s a modal I just found recently and it’s a whole lot simpler than most. Vanilla Modal stands true to its name with a pure vanilla script powering the modal, along with CSS transitions.
This thing is pretty small and super flexible, with custom CSS to restyle the windows. It also has quite a few options you can alter with JavaScript, making it perfect for running DOM functions or even callback functions.
Take a peek at the demo page to see the default style. It’s a really basic design, so it’ll require customizations to use it on a production site. But this also cuts down on the total code requirements, so it’s one of the slimmest JavaScript modal libraries.
3. plainModal
If you want a really simple script I highly recommend plainModal. It is built on jQuery, but it’s one of the smallest modal scripts available.
It does not use any external CSS or image files. Just one single JS script is all you need.
Once the plainModal script is added to your page, you just target the modal button and you’re good to go. This grants you control over the display and how much you want to alter the modal interface.
Plus, you can set up the modal with one line of JavaScript keeping with the minimalist theme of this plugin.
4. Modaal
There’s no denying accessibility is huge on the web. Every designer’s goal should be a more inclusive experience for people around the world on various devices & with possible limitations.
With Modaal, you get that perfect experience which passes the WCAG 2.0 test with a solid AA accessibility rating. You can see a fantastic example on the main page, along with some code documentation.
Overall, I recommend this vanilla JavaScript plugin for anyone who really cares about accessibility. The AA rating can be required on some web projects, so Modaal is a really handy script to keep bookmarked.
5. Scotch JS Modal
The development team at Scotch.io publish tutorials and guides for coders. Their work is incredible and it really shows in this JavaScript modal script, hosted on the Scotch GitHub.
The modal was developed by Ken Wheeler and this script even has a full tutorial if you want to learn how it works. However, the free code should be enough for most developers since this is super lightweight and easy to set up. No dependencies, and even a sample demo on CodePen.
6. Bootbox.js
The fastest way to launch a new web project is through Bootstrap. It’s a powerful frontend framework that encourages developers to create their own add-ons to the library.
One such example is Bootbox.js, a small JavaScript library, designed solely for modal windows in Bootstrap. It actually works on dialog boxes where the user can click OK or cancel, based on your request.
Typical JavaScript dialogs are awful, just like alert boxes. The Bootbox script offers a solid alternative for anyone working in the BS3/BS4 ecosystem.
Again, it’s totally free and open-source, along with a lengthy documentation page to get you up & running fast.
7. iziModal.js
If you need a solution a little more customized check out iziModal.js. This tool is fully responsive and designed to work in all modern browsers perfectly.
I’ve yet to find another modal script that offers such an aesthetically pleasing design. It comes out the gate with a gorgeous UI that can blend into practically any website. However, you can also restyle the design to suit your needs.
Just note this plugin does run on jQuery, so it’s one of the few here that has a dependency. But, if you want the iziModal styles it’s a small price to pay for such sleek popover windows.
8. jQuery Modal
The jQuery Modal plugin is perhaps the simplest modal script on jQuery you’ll ever find.
It can be programmed to automatically bind with certain HTML elements based on various attributes. It also supports keyboard shortcuts such as ESC for closing the window.
In total, this plugin measures less than 1KB and it works in every possible browser you can imagine. jQuery developers should keep this plugin saved for quick access to a simple modal script without the extra frills.
9. PicoModal
Getting back towards vanilla JavaScript, we have the PicoModal library. This is probably one of the smallest scripts you’ll find and it’s designed to run perfectly on a vanilla JavaScript backbone.
It supports all modern browsers, including mobile browsers for Android and Mobile Safari for iOS. It even supports older IE browsers, dating back to IE7!
PicoModal’s developer created a small JSfiddle script to demonstrate how it works. This is a very small example and it’s not tied to a click event or anything else, but it’s not hard to script in a few toggle buttons to run this modal window properly.
10. Avgrund
Avgrund is probably one of the most unique modals in this list. It uses a custom page fading effect, along with a shrinking animation to bring the modal right into view.
Not everyone will appreciate this animation, so I can’t say this script would fit every website. But, it is a pure vanilla modal and it’s super easy to set up, with just a CSS and a JavaScript file.
Take a look at the demo page to see how it runs. It’s certainly got a unique style and is bound to grab attention with the custom animations that just work.
Final words
No matter what you’re looking for, I’ll bet there’s something in this list to suit your needs. But, if you’re still not satisfied browse through GitHub for related modal scripts and see what else you can find.