教程：jQuery警告/确认/提示弹出对话框效果

在本教程中，代码吾爱将给大家介绍一个基于jQuery的对话框插件来模拟和替换掉JavaScript中默认的弹出对话框，它包括以下几个类型的对话框：警告、确认和带输入的提示弹出框。

教程目录

插件概述
使用方法
演示下载
已知问题
使用协议

插件概述

这个jQuery弹出对话框插件（或称弹出DIV插件），主要用于替换JavaScript自带的信息提示框函数所提供的功能（它们是alert(), confirm()和prompt()三个JS自带函数）。我们知道，这三个默认函数的显示效果非常生硬，而且我们无法根据自己的需求对其进行美化；很显然，仅使用它们势必会对网站的用户体验造成很大的影响，从而不符合“互联网潮流”了。说了这么多，我们可以将这个插件所提供的功能总结如下：

1、可以通过CSS来完整自定义弹出窗口的外观表现效果，从而让你程序的界面显得更加专业和精致。

2、你可以为每个弹出对话框设置不同的标题。

3、在传统JavaScript模式下，如果我们使用prompt()方法来实现提示效果，你会发现：在IE7浏览器下它的外观相当地难看，而且通常需要重新加载整个网页页面内容。此时，我们可以通过本插件完美解决。

本插件完全模拟传统JavaScript模式下弹出对话框的外观形态，而且当你缩放浏览器页面的窗口时，这些窗口可以自动调整其在当前窗口中的相对位置（这一点与很多其他本类插件不同，比如lightbox）。如果你将此功能结合jQuery拖拽插件一起使用，你还会发现，对话框可以通过拖拽弹出窗口的标题区域一起移动起来。

所有这些功能的实际演示和代码，大家可以在我们提供的实例下载包中看到。

jQuery的版本要求：1.2.6或以上。

使用方法与函数说明

使用方法

使用此插件的方法非常简单，你仅需将jQuery基库JS文件，弹出窗口插件的JS文件，以及对应的窗口CSS文件以外链的形式引入到你的功能页面中（HEAD标签内），比如：

<!--基础文件，分别是jQuery基库和拖拽UI插件-->
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- 对话框核心JS文件和对应的CSS文件-->
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

请注意：请确保每个JS文件相对于功能页面的路径正确性，并且，如果你已经在页面中添加了拖拽插件，那么请去掉上述代码中的jquery.ui.draggable.js文件链接。代码吾爱推荐大家使用Google AJAX Libraries 来加载jQuery基库，因为它可以加快网页的显示速度。

函数说明

你可以通过三个内建函数来分别使用三种不同形式的对话框：警告提示框(jAlert)、确定提示框(jConfirm)和带输入的提示框(jPrompt)。如下：

jAlert(message, [title, callback])
jConfirm(message, [title, callback])
jPrompt(message, [value, title, callback])

以上三个函数的参数说明：

message表示弹出框的正文内容，支持HTML标记。
title表示弹出框的标题。
callback表示回调函数或回调值，回调函数获取值的方法请查看演示中的具体实例代码。
jPrompt中的value参数表示用户输入框中的默认值。

与传统JS弹出框不同的地方是，以上三种弹出框的message参数支持HTML标签，比如要在弹出框的正文区域创建新的一行，可以在其中添加 \n 或<br />。

演示与下载

请查看三种不同对话框的演示效果，还可以选择下载本站提供的实例包：

查看演示Alert Dialogs 下载实例Version 1.0

目前，这个弹出窗口插件的版本是1.0。

已知的问题

在基于WebKit的浏览器中不支持使用键盘上的回车/ESC进行快速确定和取消。
在Opera浏览器下，不支持拖拽效果。
由于IE6不支持position: fixed属性，所以在IE6浏览器下查看弹窗效果可能会出现异样。

使用协议

本软件基于GNU General Public License协议。

如果你觉得jQuery基库体积过于庞大，但仍然希望加入使用JavaScript编写的自定义弹出窗口效果，不妨看看下面几个轻量级的弹出窗口效果：

JavaScript弹出窗口DIV层效果代码

JavaScript同时弹出多个DIV窗口层

版权声明

原文链接：http://abeautifulsite.net/notebook/87。

中文翻译：http://www.code52.net/page/JS/js200901_01_342.html

翻译：代码吾爱（转载请注明出处，并链回本页）