Tuesday, January 3, 2012

jQuery Popup Modal Dialog

jQuery UI Dialog
jQuery UI has always been my favorite tool for creating custom and rich User Interface.  JQuery UI Dialog is part of the jQuery UI which is a complete bundle of effects and plugins built on jQuery. It is customizable via css and can be implemented in any project without restrictions. You can use this dialog box in five different forms: basic dialog, modal dialog, modal message, modal confirmation, modal form.
qModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, and makes a great base as a general purpose windowing framework. It can be customized and it can act as a dialog, notice, modalbox, confirm-box, iframe-box or it can even display inline divs in modal windows.
Modal popup windows provide a quick way to show data without reloading the entire page.  It has the ability to define many callbacks at different time in the process to allow you to edit the settings, the data or do whatever you need. It has error handling also and a nice function that I loved was to call _blank targeted iframes.
ColorBox is a lightweight, customizable lightbox plugin that simulates some things that you would like to accomplish with a jQuery popup modal dialog window. It can allow you to show popup ajax, inline and iframed content as well as photos and other media. It’s writting in jQuery plugin format and can be chained with other jQuery commands.
Simple jQuery Modal Window Tutorial
In this tutorial, I’m going to share how to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to “modal” and grab the DIV #id defined in the href and displays it as a modal window. jQuery has made everything so simple, be sure to check out the demonstrations, examples I made.
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
Boxy is 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. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.
ThickBox is 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.
FancyBox is another jQuery plugin with nice easing and resize effects. This guy wanted something fresh and Mac-like so he created a plugin that delivers this ideea and style. It can group images in galleries and has a nice easeOutBack effect when closing the modal window. Check it out, it is simple and fancy!
jQuery BlockUI Plugin
The 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.

No comments: