教程：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" />