# Free JavaScript Modal Window Plugins **URL:** \ **Category:** Tools & Scripts\ **Tags:** tools, freebies, tips-tricks\ **Created:** [January 18, 2022, 2:57pm UTC](https://onehack.st/t/free-javascript-modal-window-plugins/212470 "2022-01-18T14:57:26Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![NoBody](https://onehack.st/user_avatar/onehack.st/nobody/32/163880_2.png) [@NoBody](https://onehack.st/u/NoBody)\ **Post date:** [January 18, 2022, 2:57pm UTC](https://onehack.st/t/free-javascript-modal-window-plugins/212470/1 "2022-01-18T14:57:26Z")
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. (Source: hongkiat) All of these are completely free and open-source, so you can edit the code and restyle them to fit your site as needed. #### 1. [Tingle](http://robinparisi.github.io/tingle/) One of my favorite free modal scripts is **[Tingle.js](http://robinparisi.github.io/tingle/)**. 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](https://github.com/robinparisi/tingle)**, 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](https://github.com/benceg/vanilla-modal) Here’s a modal I just found recently and it’s **a whole lot simpler than most**. **[Vanilla Modal](https://github.com/benceg/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](http://benceg.github.io/vanilla-modal/)** 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](http://anseki.github.io/jquery-plainmodal/) If you want a really simple script I highly recommend **[plainModal](http://anseki.github.io/jquery-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](https://github.com/humaan/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](https://github.com/humaan/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](http://humaan.com/modaal/), 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](https://github.com/scotch-io/javascript-modal) The development team at [Scotch.io](https://scotch.io/) publish tutorials and guides for coders. Their work is incredible and it really shows in **[this JavaScript modal script](https://github.com/scotch-io/javascript-modal), hosted on the Scotch GitHub**. The modal was developed by Ken Wheeler and this script even **has a [full tutorial](https://scotch.io/tutorials/building-your-own-javascript-modal-plugin)** 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](https://codepen.io/kenwheeler/pen/LvGjK) on CodePen. #### 6. [Bootbox.js](http://bootboxjs.com/) 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](http://bootboxjs.com/)**, 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](http://bootboxjs.com/documentation.html)** to get you up & running fast. #### 7. [iziModal.js](http://izimodal.marcelodolce.com/) If you **need a solution a little more customized** check out **[iziModal.js](http://izimodal.marcelodolce.com/)**. 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](http://jquerymodal.com/) The **[jQuery Modal plugin](http://jquerymodal.com/)** 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](https://github.com/Nycto/PicoModal) Getting back towards vanilla JavaScript, we have the **[PicoModal library](https://github.com/Nycto/PicoModal)**. 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](https://jsfiddle.net/nnrXD/)** 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](https://github.com/hakimel/Avgrund) **[Avgrund](https://github.com/hakimel/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 fil** e. Take a look at the **[demo page](http://lab.hakim.se/avgrund/)** 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](https://github.com/search?utf8=%E2%9C%93&q=modal+js&type=) for related modal scripts** and see what else you can find. **Happy learning!** ---
**Author:** ![ailihphilia](https://onehack.st/user_avatar/onehack.st/ailihphilia/32/104172_2.png) [@ailihphilia](https://onehack.st/u/ailihphilia)\ **Post date:** [January 18, 2022, 8:17pm UTC](https://onehack.st/t/free-javascript-modal-window-plugins/212470/2 "2022-01-18T20:17:14Z")
Thank you!