常用的Jquery模式对话框插件收藏

常用的Jquery模式对话框插件收藏

常用的Jquery模式对话框插件收藏

---

Modal dialog windows are a great way to show quick information to your
users, but to also alert them of errors, warnings, prompts for information and
more. When you bring jQuery into the mix, you know you’re going to end up with
a slick dialog that really makes the application or website come alive. The
following is a list of 15+ jQuery Popup Modal Dialog Plugins and Tutorials.

There are a couple towards the bottom that you’ll want to pay attention to. On
one the original is in Italian, but I’ve included a link to an English
translation. The other is more on a backend, but I’ve included a link to the
zip file for downloading the files.

Let the fun begin! If you know of any that are missing but should be included,
drop a comment!

jqModal

qModal is 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.

NyroModal

Modal popup windows provide a quick way to show data without reloading the
entire page. One of the big problems with jQuery Popup Modal Dialog window
plugins is the customization. This plugin tries to solve those problems. The
default CSS contains only optional rules. Without it, the plugin will works
perfectly –but will also looks very sad. Regarding the animations, you can
simply redefine them from A to Z.

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.

jQuery UI Dialog

The jQuery UI framework offers up a functional Dialog widget that allows
resizing and also the ability to display forms. The basic dialog window is an
overlay positioned within the viewport and is protected from page content
(like select elements) shining through with an iframe. It has a title bar and
a content area, and can be moved, resized and closed with the ‘x’ icon by
default.

SimpleModal

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

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

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.

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.

jQuery Impromptu

jQuery Impromptu is 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. Not only does it replace these
but it also allows for creating forms within these controls. This is not
intended to be a modal replacement, just a quick tool to prompt user input in
a fashionable way.

jQuery Alert Dialogs (Alert, Confirm & Prompt Replacements)

This jQuery plugin aims to replace the basic functionality provided by the
standard JavaScript alert(), confirm(), and prompt() functions. What’s the
benefit of using custom methods? These are completely customizable via CSS.
You can set a custom title for each dialog. IE7 users get an ugly warning and
usually have to reload the page if you use a regular prompt(). These methods
simulate a true modal dialog box. They will automatically re-position
themselves if you resize the browser window (unlike many existing
dialog/lightbox-style plugins). If you include the jQuery UI Draggable plugin,
the dialogs can be moved by dragging their title bars.

How to Create a Stunning and Smooth Popup Using jQuery

Nowadays, websites are more and more rich and interactive and users are
becoming more and more critical with all things in websites. Using windows
popup to show important information are in the air and 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.

jQuery Ajax Validation Contact Form with 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. All you need
is jQuery. No plugins are necessary for this to work, and it is only 2kb of
extra code in addition to the jQuery library. This also works on all browsers,
IE6 and up.

Creating an Exit Modal Box using jQuery

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. To do this we need to include 2 JQuery files (the actual
library and a plugin written by Eric Martin), the modal box’s CSS and the file
that triggers the modal box based on the user’s action.

Upload in Modal Window and Pass Values with jQuery

Do you publish your blogs with Wordpress? If yes, you know the inline popup
window which opens if you like to upload / insert an image into your article.
This tutorial shows you how-to use the jQuery Plugin ThickBox and some jQuery
code to upload a file and pass a value to the parent page. You can use this
kind of feature in your custom CMS or maybe you like use it as a basic for
your own file upload plugin or gadget?

jQuery Modal Choose Component

This original article is written in Italian, but here is the translated
English version . I wanted to be sure and include this in the rundown because
it gives another option on how to allow users to choose values for a form
field. It’s designed as an alternative to the combo box, or select dropdown
menu. It’s not perfect, but it’s an interesting take on a common UI component
and I believe deserves to be on the list.

jQuery Modal Dialog Plugin

This plugin link goes to the working example and documenation page that shows
off some real nice jQuery modal dialogs for errors, warnings, prompts and
more. Getting to the download is a little tricky unless you follow this link
to download .

ColorBox

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.

---