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

12年前
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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  9. ColorBox

    A lightweight customizable lightbox plugin for jQuery 1.3+
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  12. jQuery AJAX Validation Contact Form with Modal + Slide-in Transition

    Tutorial on creating a slide-in contact form with ajax
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  17. JQuery tricks: using Greybox + form plugin for a modal dialog box

    How to Create a jQuery Confirm Dialog Replacement
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  32. Jquery : toggle dialog box

    Two ways to make the jquery dialog box toggle on click.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  35. jQuery SuperBox

    jQuery Superbox! is a script which allows you display windows with the lightbox effect.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  39. Simple Loading Dialog w/jQuery UI

    How to create a simple jQuery dialog box while your content is loading.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  40. Creating Popup Dialog Windows using Jquery

    How you can create simple and modal popup dialog windows using JQuery.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  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.
    50 Tutorials & Examples for Beautiful jQuery or . 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 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes
  50. jQueryMobile – SimpleDialog

    SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.
    50 Tutorials & Examples for Beautiful jQuery or . Dialog Boxes