By Matt Burnett

14 jQuery Modal Dialog Boxes

By Matt Burnett

A great way to show quick information to your users is to use jQuery modal dialog boxes or windows. Dialog boxes can also be used to alert them to warnings, errors and more. If done correctly, good looking dialogs can be an easy way to make your site feel more modern without a lot of extra work.

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

Here are some Modal Dialog Boxes for you, enjoy!

Update 12 Dec 2013: Updated all plugins in this post and added new images of demos. Removed missing plugins and added new ones. There are now 18 decent ones.

Update 10 March 2016: The list of plugins have been completely updated and refreshed. If you’re not already using jQuery, skip to the bonus section for JavaScript libraries that don’t require it!

1. vex

Easily styled, highly configurable, and mobile ready, vex is a pleasure to use. Start using vex on your projects as simply a drop-in replacement, without conflicting with other libraries or plugins you may have installed. Give your site that modern look.

vex example

Homepage/Demo | GitHub

2. animatedModal.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.

animatedModal example

Homepage/Demo | GitHub

3. Remodal

Remodal is a responsive, lightweight and fully customizable modal window plugin with declarative configuration and hash tracking. You can also define a background container for the modal (so as to create effects such as a blur). It also supports IE8.

Remodal example

Homepage/Demo | GitHub

4. Avgrund Modal

Looking for something a little different? Avgrund may have you covered. The default settings create a unique effect that not only adds animations to the modal, but to the page itself, elegantly creating an illusion of depth. The best way to see how it looks is to check out the demo in the links below for yourself.

Avgrund Modal Example

Homepage/Demo | GitHub

5. noty

Who said modals need to be centered? The default for noty is flush with the top of the screen ( with the ability to easily set a variety of positions). Other modal dialogs can achieve this effect, so this isn’t necessarily unique to, but noty makes it very easy to configure.

noty Modal Example

Homepage/Demo | GitHub

6. Lean Modal

If you are using jQuery, but still want something lightweight, Lean Modal is lean and mean. At only 1kb, with no extra CSS, you’ll hardly even notice Lean Modal is there.

Lean Modal Example

Homepage/Demo | GitHub

7. jQuery Popdown

Tired of going popping up? Try popping down for a change. jQuery Popdown’s default, and only, animation comes in from the top and into our list. What it lacks in documentation and customizability, it makes up for in simplicity.

jQuery Popdown Example

Homepage/Demo | GitHub

8. jQuery UI Dialog

jQuery UI is a well supported, widely used, easily customizable, lightweight jQuery based frontend framework. The entire framework includes much more more than just modals, but if all you’re looking for are the dialog boxes, each module of the framework can be easily used individually from the download page.

jQuery UI Modal Example

Homepage/Demo | GitHub


9. Colorbox

Designed as a lightbox plugin to display images, Colorbox can elegantly meet the needs of both a lightbox and a modal dialog system.

Colorbox Example

Homepage/Demo | GitHub

10. BlockUI

While every plugin on this list is capable of Ajax, BlockUI is built for it. It allows developers to simulate synchronous behavior using Ajax, without locking the browser. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

BlockUI Example

Homepage/Demo | GitHub

11. jQuery Modal

For what it lacks in creative naming, it makes up for in browser support. The documentation claims to even support the text based browser Lynx. But, don’t be confused, jQuery Modal is not part of the jQuery project.

jQuery Modal Example

Homepage/Demo | GitHub

12. nyroModal

Do you like customization? Well, let me introduce nyroModal. Many of the other plugins on this list allow for a great deal of customization, but nyroModal is designed around allowing the developer a great deal of freedom, even down to the animations.

nyroModal Example

Homepage/Demo | GitHub

13. jqModal

At only about 375 lines of code, including comments, the source code jqModal is very basic and straightforward. Making it a great option if you want to dig into the source code yourself.

jqModal Example

Homepage/Demo | GitHub

14. Zebra Dialog

The default flat theme on Zebra looks fantastic, however feel free to customize your own!

Zebra Dialog Example

Homepage/Demo | GitHub

Bonus: rmodal

Want something that doesn’t use jQuery, but is still lighweight and looks great? You may have found the one you’re looking for. Coming in at 3kb and no jQuery dependancy, rmodal is the most lightweight option on our list.

rmodal Example

Homepage/Demo | GitHub

Bonus: SweetAlert

SweetAlert may not be the most lightweight modal on our list at 17kb, but it is the most popular. However, it does not need jQuery. If your site is small and the only reason you’re considering jQuery is to add a dialog, 17kb is much smaller than the entire jQuery library which can be hundreds of kilobytes. Sweet Alert also looks really great.

Sweet Alert example

Homepage/Demo | GitHub

  • M S i N Lund

    Some of those don’t even have actually working demos.

    I just built my own, for a project.
    Its pretty easy to do, and to do right.

    Copy/paste stuff like this just leads to bloat and bad user-experiences, as it allows people who shouldn’t build sites, paste shitty ones together.

    For example, most of these libraries and frameworks seem very proud of their effects and animations, and encourage uninformed designer-wannabees to use them.
    …which is one of the reasons we now have tons of sites that are slower and more sluggish to use than those in the 1990s even though they run on computers and connections that are literally thousands of times faster.

    • JIB

      Bro subscribe to better internet connection, how long you can survive on 1990s dial-up. I was wondering why you are even here on this page if you have built your own solution and write this big comment. :)

      • M S i N Lund


        I have a 1 Gig connection, symmetric.

        And a top of the line computer.

        Good enough for you?

        But it doesn’t help if stuff downloads in less of a second, if you then have to sit trough sluggish slow-motion animated reveals for every fucking thing on every page.

        Just because some idiot designer got bored and deiced to shit all over everything with every single cool effect he got for Christmas.

        Kids need to learn.

        Learn that just because you can do something, does not mean you should do it.

        And it never means you must do it.

        Knowing that one thing, is more important than everythng else you will ever learn.

  • Alex Hall

    “… is much smaller than the entire jQuery library which can be hundreds of kilobytes.”.

    No. That is not true. The latest version of jQuery 2 is currently 29.5kb when served from a CDN. That is NOT big and certainly nowhere near “hundreds of kilobytes”.

    But, I do get your point. If you don’t use any other parts of jQuery, you probably shouldn’t include the whole library.

  • Thank you very much for this useful article. I have used SweetAlert and animatedModal.js on my website.

  • Félix Zapata

    I don’t know if these solutions are accessible but I would like to remember that the best solution for a modal dialog should be accessible too.

    • Vincent

      Colorbox and jQuery UI Dialog have good accessibility support. Remodal needs to focus the activating control when the dialog is closed, then I’d recommend.

  • M S i N Lund

    Oh come on now…
    Not a single one of the demos on their own site work!

    • James Hackney

      They work now. One of the file links was incorrect.

      • M S i N Lund

        And that’s why you don’t use stuff like this.
        You don’t make basic functionality on a site dependent on some 3rd-party resource being there all the time.

        Also the examples still don’t work.
        Hitting esc closes the boxes, but enter didn’t trigger OK.
        Also, trying that a couple of times locked several boxes permanently.

        The pretty effects seem to work 100% though, so i guess those are the main function of this instead of the actual main function.

        I never stop being amazed of how people love to invent their own slightly less round wheels.

        • James Hackney

          Your more than welcome to contribute if you like. I would appreciate any assistance. Other than that, thanks for the heads up on the enter. I will correct. Keep in mind I am more focused on the GreenSock animation side of it which provides animation without slowing down a website.

  • Nice post, thanks for a great collection.

  • Nagarupa Yerramsetti

    I am unable to get the form tag for the entire form as it is being used by the dialog box.If I move the form tag outside I am unable to add the milestones more than once …Anybody please give a solution for the below code

  • Martin Friis

    nice article, I also would recommend ArtDesignUI plugins because I am using them for a long time and I am very satisfied. Definitely can say that they are one of the best!

  • Max Orlov

    where is magnific popup?

Get the latest in JavaScript, once a week, for free.