17 jQuery Modal Dialog Boxes

Sam Deering

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!

Related posts:

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.

bPopup-JS.jpg
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.

Messi.jpg
Source + Demo

3. Shadowbox.js

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

Shadowbox-JS.jpg
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.

jQuery-Impromptu.jpg
SourceDemo

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.

jqModal.jpg
SourceDemo

6. Colorbox – a jQuery lightbox

A lightweight customizable lightbox plugin for jQuery

Colorbox.jpg
SourceDemo

7. NyroModal v2

Provides quick way to show data without reloading page.

NyroModal.jpg
SourceDemo

8. jQuery Speedo Popup

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

Speedo-Popup.jpg
SourceDemo

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.

Boxy.jpg
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.

SimpleModal.jpg
SourceDemo

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…

Smooth-Popup.jpg
SourceDemo

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.

Exit-Modal.jpg
SourceDemo

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.

jQuey-BlockUI.jpg
SourceDemo

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.

Tickbox.jpg
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.

Contact-Form-with-Modal.jpg
SourceDemo

16. jQuery UI Dialog

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

UI-Dialog.jpg
Source + Demo

17. Simple jQuery Modal

Create a simple modal window using jQuery.

Simple-jQuery-Modal.jpg
Demo

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
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 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
    thanks

  • 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

    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

    erertretret

  • Rajdeep Paul

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

  • sifokl

    I used Messi ! very simple and efficient