【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”
本文为你介绍 50 个使用 jQuery 或者 JavaScript 开发网页上对话框的实例或者是教程:- Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
- Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties
- 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.
- 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.
- 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 是一个用来显示漂亮的错误提示、警告、信息提示的jQuery对话框插件。可以通过css对对话框的样式进行定制,包括定制对话框的按钮等。
- SIMPLEMODAL
SimpleModal是一个轻量级jQuery插件提供一个用于创建模式对话框的强大框架。由于是一个框架,它可以给予你极大的灵活性来构建你想要的任意模式对话框。 - jqModal
jqModal 是一个用来显示提醒、对话框和模式窗口的jQuery插件,具有很强的可定制性,生成的窗口可以进行鼠标拖放。
- ColorBox
ColorBox是一个基于jQuery 1.3 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文件就能重写展示效果设置,支持加载预处理提示等等,效果图如下:
- 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.
- 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.
- jQuery AJAX Validation Contact Form with Modal + Slide-in Transition
Tutorial on creating a slide-in contact form with ajax
- 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
- jQuery ThickBox 3.1
ThickBox是一个基于JQuery类库的扩展,它能在浏览器界面上显示非常棒的UI框, 它可以显示单图片,多图片,ajax请求内容或链接内容.
- boxy – Facebook-like dialog/overlay, with frills
boxy 是一个用来实现类似 Facebook 风格的提示对话框的jQuery插件,包括:提示、确认等。支持拖拉、改变大小、Ajax数据加载等功能。
- NyroModal v2 :: jQuery Plugin
一个基于jQuery开发,非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容,改变对话框大小等。
- JQuery tricks: using Greybox + form plugin for a modal dialog box
How to Create a jQuery Confirm Dialog Replacement
- 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. - Zebra_Dialog, a lightweight dialog box jQuery plugin
Zebra_Dialog 是一个小型的对话框插件,最小化后只有 4K 左右,只包含一个 js 文件,要求 jQuery 1.5.2 或者更新版本。是一个可灵活配置的对话框插件。
- 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.
- Apprise: Attractive Alert and Dialog Box for jQuery
在网页中要与用户交互比较常见的方式是使用对话框(alert,confirm等),默认的对话框样式都不好看,而 Apprise就是一个漂亮的jQuery对话框插件。
- 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.
- Videobox: Lightbox for videos
Videobox 是6kb大小的脚本,它能让您在灯箱显示您的影片。它的灵感来自Lightbox.v2和使用了Slimbox的部分代码。它用美妙的MooTools 库,并用swfobject嵌入Flash。它做了一个真正伟大的工作,如果你想在同一个覆盖页面显示您的影片,Videobox是一个真正很好的选择。 - 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.
- 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.
- 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.
- CSS Modal Box without Javascript or Images
Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. Here we have CSS Modal by Paul Hayes.
- 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.
- 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.
- 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.
- 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.
- Jquery : toggle dialog box
Two ways to make the jquery dialog box toggle on click.
- fancyBox
FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该lightbox除了能够展示图片之外,还可以展示iframed内容, 通过css自定义外观。
- prettyPhoto
PrettyPhoto 是在 jQuery基础上完成的类似lightbox的无刷新图片显示插件,实际上它不仅能显示图片,还能显示许多的类型,比如在可能弹出的层窗口中加载一段视 频、一段Flash动画、一个已布局好的网页、一个框架页等等,功能还是挺多的,而且设计超精美,真不赖。
- jQuery SuperBox
jQuery Superbox!是一个jQuery插件用于创建可定制的模式对话框(效果与lightbox相似)。它可以展示任意类型的内容包括iframes,默 认为图片类型(支持单张或多张模式)。模式对话框的尺寸可以根据展示的内容自动调整,也可以定义一个标准展示尺寸。
- 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.
- 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.
- 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.
- Simple Loading Dialog w/jQuery UI
How to create a simple jQuery dialog box while your content is loading.
- Creating Popup Dialog Windows using Jquery
How you can create simple and modal popup dialog windows using JQuery.
- 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.
- 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.
- CeraBox
CeraBox 是基于 MooTools 1.3 的一个类似 FancyBox 的弹出窗口库,支持图片、Flash 和 HTML 内容显示,可加载 iframe 和 Ajax 请求。
- Bumpbox 2.0
A lightbox clone with support for PDF, flv, swf, audio, images, inline HTML and remote html files.
- 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.
- 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.
- 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.
- Creating a Dialog with jQuery UI
Another simple tutorial on how to create a simple dialog box using jQuery dialog class.
- A Custom Dialog Box in JQuery Tutorial
Twitter like simple, custom dialog box using jQuery
- jQueryMobile – SimpleDialog
SimpleDialog aims to be a replacement for javascript dialog(), written for jQM.
This is just a small list of all tutorials or examples out there. If you find some articles or examples reall useful, please dont hesitate to let us know by posting them in the comments
via techflaps