jQuery Dialog 弹出层对话框插件
<!-- 背景遮盖层 -->
<div class="dialog-overlay"></div>
<!-- 对话框 -->
<div class="dialog">
<div class="bar">
<span class="title">标题</span>
<a class="close">[关闭]</a>
</div>
<div class="content">内容部分</div>
</div>
这就是两个div层的结构，第一个背景遮盖层只有在需要的时候才创建。每个div都定义了一个CSS类，这样便于自定义其外观。
一些基本功能的实现
移动框体
只要在mousemove事件中，计算两次移动鼠标位置的差值，再加上被移动框的原始的top,left，就是对话框新的位置。mousemove事件只需要在鼠标按下标题栏的时候才需要触发，所以只有在触发标题栏的mousedown事件时才绑定mousemove事件，而鼠标释放时也同时解除mousemove的绑定。
mousemove和解除绑定mousemove事件的mouseup却没有绑定到标题栏上，而是document上，之所以这样，是因为有时鼠标移动过快时，会移出标题栏范围，此时若是绑定到标题栏上的事件就会失效，而绑定到document就不会。
var mouse={x:0,y:0};
function moveDialog(event)
{
var e = window.event || event;
var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
dialog.css({top:top,left:left});
mouse.x = e.clientX;
mouse.y = e.clientY;
};
dialog.find('.bar').mousedown(function(event){
var e = window.event || event;
mouse.x = e.clientX;
mouse.y = e.clientY;
$(document).bind('mousemove',moveDialog);
});
$(document).mouseup(function(event){
$(document).unbind('mousemove', moveDialog);
});
定位
居中定位很容易实现，IE下的clientWidth, offsetWidth等一系列属性和其它浏览器好像有点不一样，所以不要用这些属性，可以直接用jQuery下的width()函数：
var left = ($(window).width() - dialog.width()) / 2;
var top = ($(window).height() - dialog.height()) / 2;
dialog.css({top:top,left:left});IE6下并没有fixed模式，但是能通过window.onscroll事件模拟实现：
// top 对话框到可视区域顶部位置的距离。
var top = parseInt(dialog.css('top')) - $(document).scrollTop();
var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
$(window).scroll(function(){
dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
});
z-index
为了能实现多个对话框并存，采用了一个静态的zIndex变量，每次创建新对话框时，都实现一次自增操作，并将新值赋值给新创建的对话框的z-index，这样就能保证最后创建的对话框总在最前面。
对外接口
插件通过以下的方式调用：
var dlg = new Dialog(content, options);
dlg.show();当然如果只是一般的使用，可以更简单一些：
new Dialog(content, options).show();
// 或是
dialog(content, options);还可以通过以下四个函数，对插件进行进一步的控制：
show()：显示对话框
hide()：隐藏对话框，但并不删除对话框内的内容。
close()：关闭对话框，彻底删除其内容。
setContent(content)：改变对话框内的内容。
构造函数的参数
构造函数有两个参数。content和options。content表示对话框的内容；options表示对话框的各个配置选项。
content可以是一个字符串，表示显示的内容。或是一个Object类型，若是Object类型，则需要包含以下两个属性：type和value。type表示数据类型，而value则是type对应的内容。type接受以下几种类型：
id：显示某一ID的内容，但并不包含此ID本身的内容。value对应为某一HTML元素的ID值。
img：显示一张图片。value对应为图片的uri。
url：通过ajax方式显示某一URL的内容，所以必需要在同一域名下。value为对应的URL地址。
iframe：将一URL指定的内容显示到iframe中，它去除了AJAX调用的一些限制（相同域名，返回的HTML代码中不能包含head头等。）。value为对应的URL。
options则是对Dialog行为和外观的具体设置：
| 选项 | ||
| 名称 | 描述 | 默认值 |
|---|---|---|
| title | 标题栏的文本 | 标题 |
| closeText | 关闭按钮文字 | [关闭] |
| showTitle | 是否显示标题栏，若为否，则标题和关闭按钮都将不显示。 | true |
| draggable | 是否可以拖动框体。 | true |
| modal | 模态对话框，若为是，则不可操作背景层。 | true |
| center | 是否居中显示，若为否，则通过CSS中的内容进行定位。 | true |
| fixed | 对话框是否跟随滚动条移动。 | true |
| time | 自动关闭对话框时间，单位毫秒，若为0，表示不会自动关闭。 | 0 |
| id | 对话框的ID。若为false，则表示自动产生。 | false |
| 回调函数 | ||
| 名称 | 描述 | 返回值类型 |
| beforeShow | 在显示之前调用，若返回false，则不显示对话框。 | bool |
| afterShow | 显示之后调用。 | 无 |
| beforeHide | 在隐藏之前调用，若返回false，则不隐藏对话框。 | bool |
| afterHide | 隐藏之后调用。 | 无 |
| beforeClose | 在关闭之前调用，若返回false，则不关闭对话框。 | bool |
| afterClose | 关闭之后调用。 | 无 |
自定义CSS
插件为对话框的每一个部分都提供了一个CSS类名，很容易实现CSS的自定义：
| 类名 | 描述 |
|---|---|
| .dialog-overlay | 模态对话框时，的背景遮盖层。 |
| .dialog | 对话框的CSS。 |
| .dialog .bar | 标题栏的CSS。包含了标题和关闭按钮。 |
| .dialog .bar .title | 标题栏的标题部分。 |
| .dialog .bar .close | 标题栏的关闭按钮部分。 |
| .dialog .content | 内容部分。 |
你可以直接修改这些CSS类，进行全局的修改，也可以通过id加类名的方式修改某一个对话框。
/* 只修改id为#dialog的对话框。 */
#dialog1 .bar
{
text-transform:lowercase;
}
// 通过id属性指定对话框的id。
new Dialog('text',{id:'dialog1'});
在线演示代码
代码打包下载
您可能感兴趣的文章：
JQuery Float Dialog
jQuery Simple Dialog
jQuery 对话框插件 Dialog jQuery Plugin
jQuery对话框 jQuery Modal Dialog
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
jQuery UI 教程之二 ——jquery ui dialog的使用
Jquery中dialog属性小记
用jquery中插件dialog实现弹框效果实例代码
jQuery UI Dialog 创建友好的弹出对话框实现代码
jQuery Dialog 弹出层对话框插件