A great way to show quick information to your user is to use jQuery modal dialog boxes or windows. Dialog boxes can also use to alert them to warnings, errors and more. What if jQuery gets into the action? Well, expect coolness and boldness that can spice up your website! Here are some jQuery 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.

1. bPopup.js

It is a lightweight jQuery modal popup plugin (only 1.49KB gzipped). It doesn’t create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.

Source + Demo

2. Messi

It is a jQuery plugin to show clean, elegant messages in a simple way. With Messi you will avoid to use default JavaScript alert notifications or new windows to provide extended information to the user.

Source + Demo

3. Shadowbox.js

A web-based media viewer application that supports all of the web’s most popular media publishing formats.

Source + Demo

4. jQuery Impromptu

An extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm.


5. jqModal

A plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.


6. Colorbox – a jQuery lightbox

A lightweight customizable lightbox plugin for jQuery


7. NyroModal v2

Provides quick way to show data without reloading page.


8. jQuery Speedo Popup

A small, powerful and real customizable jQuery Popup / modal plugin. Built with HTML5 and CSS3.


9. Boxy

A flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created.

Source + Demo

10. SimpleModal

A lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.


11. Smooth Popup

We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial…


12. Exit Modal Box

Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window.


13. jQuery BlockUI Plugin

Lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.


14. Tickbox (depracated)

A webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Source + Demo

15. jQuery Ajax Validation Contact Form w/ Modal + Slide-in Transition

Due to popular demand, here is a tutorial on how I created one of the more complicated pieces of machinery on my new site: the contact form.


16. jQuery UI Dialog

This offers functional dialog widget that allows resizing and also to display forms.

Source + Demo

17. Simple jQuery Modal

Create a simple modal window using jQuery.


18. Likno Web Modal Windows Builder

Likno Web Modal Windows Builder is a powerful WYSIWYG software for creating stunning jQuery modal windows, dialog boxes, modal slideshows, popup boxes e.t.c. The application creates all the code needed so no coding skills are required. All the results are cross-browser, cross-CMS and cross-devices.

Likno Web Modal Windows Builder

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • http://vortexdev.netii.net veteran

    thanks, looks a great tools.
    i like the example n°6

  • Pingback: 10 JavaScript Dialog Box/Window Tutorials | jQuery4u()

  • Pingback: jQuery4u Top Page URLs | jQuery4u()

  • Pingback: jQuery alert box yes or no | jQuery4u()

  • http://tamiltab.com tamiltab

    that is very helpeful information

  • http://www.feathersdesigns.com punithan

    good stuff

  • http://www.idoodlemanila.com/ Photobooth Manila

    Awesome compilation! Ajax Contact Form is the exact function that I am looking for. Thank you!

  • neeraj tyagi

    it’s very helful thanks for upload…..

  • http://www.weblbdesigns.com LaurenB

    #5 is awesome. So simple. Great form with in a dialog box… just the think I’ve been trying to find!

  • http://jquery4u.com/ jQuery4u

    Added #15 Messi.js

  • http://jquery4u.com/ jQuery4u

    Added #16 bPopup.js

  • test


  • Pingback: 16 jQuery Modal Dialog Boxes | SnipBoard()

  • Kawsar

    Messi and bPopup is best, simple and useful :)

  • Kawsar

    Messi and bPopup is best, simple and useful :)

  • Kawsar

    Messi and bPopup is best, simple and useful :)

  • Pingback: Best 10 jQuery Popup Window Tutorials | jQuery4u()

  • Arch

    hey..can an action class be called by submitting a form in a modal?? if yes..how?? kindly help

  • thilip

    nice collection

  • raphael

    Messi not compatoble with facebook canevas can someone help?

  • Steven Hr.

    Great collection, thanks for sharing it!

    I would recommend also Likno Web Modal Windows Builder, a WYSIWYG application that helps me create any modal window with no code. So i recommend it for those that are not programming experts yet :)

  • Aimanz


  • Rajdeep Paul

    Great tools!!! Thanx mate. Cheers! :)

  • sifokl

    I used Messi ! very simple and efficient

  • heithem moumni


  • Nicolas Hoffmann

    Maybe you could add this one? http://a11y.nicolas-hoffmann.net/modal/ (JQuery accessible modal)

  • iftikhar

    I like example #6

  • Dinesh Reddy

    I have an iframe all my script falls here but I want to implement a function such that when ever a user hovers over the content in iframe a modal should come with parent as the main window note that my iframe and main window are cross domain and main window doesn’t know the content of the modal dialog which pops out when mouse is hovered over ifrane content suggest a modal which solves my problem


    Helpful !!!

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.