自己开发Dialog 弹出层对话框插件(基于jQuery)

原理很简单，通过JS动态构建一个div层，将其插入到body中，然后通过调整position的CSS属性为absolute或fixed，使其脱离原来的文档流的位置。再通过适当的加工美化就成了。

 1 <!-- 背景遮盖层 -->

 2 <div class="dialog-overlay"></div>

 3 <!-- 对话框 -->

 4 <div class="dialog">

 5   <div class="bar">

 6     <span class="title">标题</span>

 7     <a class="close">[关闭]</a>

 8   </div>

 9   <div class="content">内容部分</div>

10 </div>

这就是两个div层的结构，第一个背景遮盖层只有在需要的时候才创建。每个div都定义了一个CSS类，这样便于自定义其外观。

一些基本功能的实现

移动框体

只要在mousemove事件中，计算两次移动鼠标位置的差值，再加上被移动框的原始的top,left，就是对话框新的位置。mousemove事件只需要在鼠标按下标题栏的时候才需要触发，所以只有在触发标题栏的mousedown事件时才绑定mousemove事件，而鼠标释放时也同时解除mousemove的绑定。

mousemove和解除绑定mousemove事件的mouseup却没有绑定到标题栏上，而是document上，之所以这样，是因为有时鼠标移动过快时，会移出标题栏范围，此时若是绑定到标题栏上的事件就会失效，而绑定到document就不会。

 1 var mouse={x:0,y:0};

 2 function moveDialog(event)

 3 {

 4     var e = window.event || event;

 5     var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);

 6     var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);

 7     dialog.css({top:top,left:left});

 8     mouse.x = e.clientX;

 9     mouse.y = e.clientY;

10 };

11 dialog.find('.bar').mousedown(function(event){

12     var e = window.event || event;

13     mouse.x = e.clientX;

14     mouse.y = e.clientY;

15     $(document).bind('mousemove',moveDialog);

16 });

17 $(document).mouseup(function(event){

18     $(document).unbind('mousemove', moveDialog);

19 });

定位

居中定位很容易实现，IE下的clientWidth, offsetWidth等一系列属性和其它浏览器好像有点不一样，所以不要用这些属性，可以直接用jQuery下的width()函数：

1 var left = ($(window).width() - dialog.width()) / 2;

2  var top = ($(window).height() - dialog.height()) / 2;

3 dialog.css({top:top,left:left});

IE6下并没有fixed模式，但是能通过window.onscroll事件模拟实现：

1 // top 对话框到可视区域顶部位置的距离。

2 var top = parseInt(dialog.css('top')) - $(document).scrollTop();

3 var left = parseInt(dialog.css('left')) - $(document).scrollLeft();

4 $(window).scroll(function(){

5     dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});

6 });

z-index

为了能实现多个对话框并存，采用了一个静态的zIndex变量，每次创建新对话框时，都实现一次自增操作，并将新值赋值给新创建的对话框的z-index，这样就能保证最后创建的对话框总在最前面。

对外接口

　　插件通过以下的方式调用：

1 var dlg = new Dialog(content, options);

2 dlg.show();

　　当然如果只是一般的使用，可以更简单一些：

1 new Dialog(content, options).show();

2  // 或是

3  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加类名的方式修改某一个对话框。

1 /* 只修改id为#dialog的对话框。 */

2 #dialog1 .bar

3  {

4   text-transform:lowercase;

5  }

1 // 通过id属性指定对话框的id。

2  new Dialog('text',{id:'dialog1'});