An awesome way to show quick information to your users is to use jQuery modal dialog boxes or windows.

Yes, you can find lots of pure CSS modals, but these don’t offer the same control as JavaScript ones. By using a JavaScript modal, you can add custom animations, UI inputs, and enhance the user experience.

Many frameworks, such as Bootstrap or Zurb Foundation includes modals and dialogs. However, if all you want is a great looking, easy to use modal window without designing it from scratch, there are plenty of libraries out there to help you.

Today I’ve collected the 10 JavaScript-powered modal scripts here for you to look and pick out your favourites.

1. Modaal

Modaal

Modaal is Web Content Accessibility Guidelines 2.0 based modal window plugin. This plugin is developed with UX in mind, this plugin has a lot of advanced features like full-screen window and keyboard controls.

2. animatedModal.js

Animated Modal.js

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions.

3. Avgrund

Avgrund Modal

Avgrund is a jQuery plugin for your modal boxes and popups. It uses new concept showing depth between popup and page.It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

4. Micromodal

Micromodal

The aim of this library is to make modal dialogs accessible and easy to include in your project with minimum configuration. It’s only ~1.8kb minified and gzipped – A tiny library for big change.

5. Remodal

Remodal

Responsive, lightweight, fast, synchronized with CSS animations, fully customisable modal window plugin with declarative configuration and hash tracking.

6. VenoBox

Venobox

Just another responsive jQuery modal window plugin that also suitable for images, inline contents, iFrames, Google Maps, Vimeo and YouTube videos. The big difference compared to many others plugins like this is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window (so in small devices you can scroll down the content, avoiding vertical microscopic resized images).

7. Tingle

Tingle.js

Tingle.js is a vanilla JavaScript with no dependencies, so you don’t need any jQuery or Zepto libraries.

It’s a small library, although it does have a lot of options for customisation, like 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 and supports older browsers, too.

8. BootboxJS

Bootboxjs

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing, or removing any of the required DOM elements or JavaScript event handlers.

9. Popbox.js

pop up is a javascript modal plugin

Popbox.js is a tiny javascript plugin for creating stackable modals. It is fully customizable and dependency free.

10. rModal.js

Rmodal

This is a fast and straightforward Javascript modal dialog library. It is amazingly lightweight(only 1.2KB), with no dependencies, and works excellent with Bootstrap and Animate.css. It supports ES modules, CommonJS and is compatible with all browsers including IE9+.

Share

10 JavaScript Modal Window Libraries & Plugins