插件概述

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

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

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

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

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

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

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

使用方法与函数说明

1.使用方法

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


折叠 展开 XML/HTML Code 复制内容到剪贴板


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

2.函数说明

你可以通过三个内建函数来分别使用三种不同形式的对话框：警告提示框(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 />。

已知的问题

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