Free Vanilla JS Modal Window Script – Tingle.js

A free library of JavaScript modal window built for minimalist websites that is also really easy to work with.

Modal windows have quickly replaced the default browser alert box. Well-designed modals are more compatible with a great user experience and modal windows come with many custom effects and designs.

It’s possible to build pure CSS modals but these often lack a certain je ne sais quoi that you’ll find in JS-powered scripts.

And one of my favorites is Tingle.js, a free JavaScript modal window built for minimalist websites.

tingle.js modal plugin

This library has been around for a while but it’s still technically in v1.0 development with frequent improvements.

But it’s a stable script running on pure vanilla JS so you can use this anywhere. It doesn’t require any knowledge of ECMAScript nor do you need any higher-level libraries like TypeScript.

Everything in Tingle.js is well documented and even comes with a clear API for customizing the animations, button effects, and callback functions.

Take a look at the GitHub repo for more info with links to the main API and callback functions, all of which you’ll find in great detail on the Tingle.js homepage.

If you feel comfortable editing JavaScript then you’ll love this plugin. It’s super easy to work with and the CSS codes are even easier to overwrite with your own stylesheet.

The main documentation is clearly outlined with live examples you can copy/paste into your HTML.

tinglejs animation modal example

Tingle.js is a pretty straightforward script. You’ll either like the way it works, or you won’t.

With a few minutes on the main demo page, you should be able to tell if you like this or not. It supports as many buttons as you need along with user input fields if you wanna pull info from the user.

Plus this can work with huge lengthy modals in terms of service, custom alert messages, and even embedded content with images & videos.

Definitely one of the most well-supported modal windows out there and the clean design is easy to restyle for any layout.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail