Tuesday, July 23, 2013

17 jQuery Modal Dialog Boxes

 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 20 June 2013: Updated all plugins in this post and added new images of demos. Removed missing plugins and added new ones. There are noew 17 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
SourceDemo

No comments:

Post a Comment