All of these are completely free and open-source, so you can edit the code and restyle them to fit your site as needed.
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.
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.
You won’t need any other scripts, so SweetAlert2 runs pretty light. Take a look at the demos to see how the modals look like in a real web page. SweetAlert2 is a perfect solution for stylish modal alert boxes.
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.
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.
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.
Again, it’s totally free and open-source, along with a lengthy documentation page to get you up & running fast.
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.
9. 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.
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.
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.
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.
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.
Published at Mon, 06 Nov 2017 13:01:40 +0000