50 个 jQuery 和 JavaScript 对话框的教程和实例

The following is a list of 50 dialog box tutorials, examples of plugins that you can use in your website or blog. Most of them are using jQuery, while some use pure JavaScript and some use other JavaScript libraries. In the end, all of them are using the Mighty JavaScript.

1. Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
   
   One thing about this dialog box, it uses CSS3 drop shawdow and a completely CSS3 skined button. So, latest version of chrome, firefox and safari will have no problems with it, but for IE6 and 7, the script will work but the display of the dialog box will look plain, no rounded border, drop shadow and gradient.
   
   
2. Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties
   
   Here are three examples (including a complete demo) of a form submission confirmation dialog. One each for just javascript, the jQuery UI dialog box, and Thickbox.
   
   
3. jQuery Dialog Box Tutorial
   
   Display a dialog box to confirm that when someone clicked a cancel link that they meant to do the cancel action.
   
4. Creating an Exit Modal Box using the jQuery library
   
   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.
   
   
5. 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.
   
   
6. 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.
   
   
7. SIMPLEMODAL
   
   SIMPLEMODAL is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content.
   
   
8. jqModal
   
   jqModal 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.
   
   
9. ColorBox
   
   A lightweight customizable lightbox plugin for jQuery 1.3+
   
   
10. jQuery File Upload in Modal Window
    
    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.
    
    
11. jQuery Dialog
    
    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.
    
    
12. jQuery AJAX Validation Contact Form with Modal + Slide-in Transition
    
    Tutorial on creating a slide-in contact form with ajax
    
    
13. How to create a stunning and smooth popup using jQuery
    
    Learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial
    
    
14. jQuery ThickBox 3.1
    
    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.
    
    
15. boxy – 非死book-like dialog/overlay, with frills
    
    Boxy is a flexible, 非死book-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.
    
    
16. NyroModal v2 :: jQuery Plugin
    
    nyroModal v2 now works with filters that let you define totally new possibilities for the plugin about the way it should work. Like in the version 1, you still have a bunch of callbacks that you can define in many different places.
    
    
17. JQuery tricks: using Greybox + form plugin for a modal dialog box
    
    How to Create a jQuery Confirm Dialog Replacement
    
    
18. How to Create a jQuery Confirm Dialog Replacement
    
    Tutorial on building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
    
    
19. Zebra_Dialog, a lightweight dialog box jQuery plugin
    
    Zebra_Dialog is a small (4KB minified), compact (one Java Script file, no dependencies other than jQuery 1.5.2+) and highly configurable jQuery plugin for creating modal dialog boxes, meant to replace native Java Script “alert” and “confirmation” dialog boxes, and built using the jQuery Plugin Boilerplate.
    
    
20. Learning jQuery: Optimize Using Modal Window or Dialog Box in JQuery UI
    
    This post is in the Learning jQuery series. Let’s enjoy a post today by learning how to maximize the Modal Windows or Dialog Box in jQuery UI. This post explains how to use this Dialog Box on the right way.
    
    
21. Apprise: Attractive Alert and Dialog Box for jQuery
    
    Apprise is an alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality.
    
    
22. Another 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.
    
    
23. Videobox: Lightbox for videos
    
    Videobox is a 6kb script, which shows your videos in the page with an overlay. It was inspired from Lightbox.v2 and uses some of the Slimbox’s code. It’s written for the wonderful mootools library. And used swfobject to embed flash.
    
    
24. Custom JavaScript Dialog Boxes
    
    This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here.
    
    
25. JavaScript Modal Windows – TinyBox2
    
    The script is now executed by passing an object due to the large number of options. There is nothing to initialize, just call the function on whatever mouse or browser event you like.
    
    
26. Simple Lightweight Modal Windows jQuery Plugin
    
    LeanModal is a simple JQuery plugin for modal windows. It is built for all the short dialogs, alerts, panels and such associated with an app, that you may want to handle in a modal window. Designed to handle hidden content, and doesn’t apply any styles to the target element, other than for displaying and positioning.
    
    
27. CSS Modal Box without Javascript or Images
    
    Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. Here we have CSS Modal by Paul Hayes.
    
    
28. 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.
    
    
29. Login Box Modal Dialog Window with CSS and jQuery
    
    How to create a simple modal dialog window with jQuery by using of a login box. This tutorial requires intermediate knowledge of CSS and jQuery.
    
    
30. Animate a Custom Dialog Box with CSS3 and jQuery
    
    Building a simple fade-in dialog box. This may contain a signup/login form, input buttons, or even just a message to your visitors. The technique is pristine and gaining adoption in the sphere of web developers everywhere.
    
    
31. Creating modal dialogs with overlay
    
    This demo shows you how you can use the overlay tool to prompt for user input. You may be familiar with the old school prompt() call in JavaScript.
    
    
32. Jquery : toggle dialog box
    
    Two ways to make the jquery dialog box toggle on click.
    
    
33. fancyBox
    
    fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
    
    
34. prettyPhoto
    
    prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, 油Tube, iframes and ajax. It’s a full blown media lightbox.
    
    
35. jQuery SuperBox
    
    jQuery Superbox! is a script which allows you display windows with the lightbox effect.
    
    
36. Modalbox
    
    ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing bigger versions of images.
    
    
37. Prototype Window
    
    This javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired by the powerful script.aculo.us library.
    
    
38. Build A Better Dialog Box With jQuery
    
    The script is fairly simple, and requires very little code to implement. No additional images are required, although they can be added on the DIV for an even more-stylized look. The effect is very smooth in comparison to the traditional alert box. Also, this event can be applied to nearly any HTML element, including links, divs, images, buttons, etc.
    
    
39. Simple Loading Dialog w/jQuery UI
    
    How to create a simple jQuery dialog box while your content is loading.
    
    
40. Creating Popup Dialog Windows using Jquery
    
    How you can create simple and modal popup dialog windows using JQuery.
    
    
41. Simple Overlay Demo
    
    Simple Overlay can be used in a variety of different ways. Some examples of how to use the plugin are below. All code used is below.
    
    
42. PIROBOX EXTENDED V.1.0 – jQuery plugin
    
    One of the most important things is the ability to open any kind of files, from inLine content to the swf files, from simple images to pdf files. Other things are: automatic image resizing and drag and drop.
    
    
43. CeraBox
    
    CeraBox is the alternative Lightbox build on MooTools 1.4, inspired by Fancybox.net. Requires MooTools 1.4.+ MooTools more Assets Download package here or go to MooTools.net
    
    
44. Bumpbox 2.0
    
    A lightbox clone with support for PDF, flv, swf, audio, images, inline HTML and remote html files.
    
45. JQuery Alert Dialog Boxes With Simple Demo
    
    Browsers alert boxes are simple and they look different from browser to browser and while sometimes this is a good thing as the user is used to their browser’s alert dialog boxes, there are times that we need a common style for our alert, prompt or confirm dialog boxes.
    
    
46. Reveal: jQuery Modals Made Easy
    
    Reveal is awesome because it’s easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. What that means for you is that it’s fast, sexy and just works.
    
47. Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes
    
    The following list is useful if you need to replace the classical JavaScript message boxes (alert, confirm, prompt) with new and CSS customizable ones. JQuery and MooTools are some of the libraries used to make these excellent dialog boxes.
    
48. Creating a Dialog with jQuery UI
    
    Another simple tutorial on how to create a simple dialog box using jQuery dialog class.
    
49. A Custom Dialog Box in JQuery Tutorial
    
    推ter like simple, custom dialog box using jQuery
    
    
50. jQueryMobile – SimpleDialog
    
    SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.