jQuery Dialog 弹出层对话框插件

本文采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议 进行许可。
转载时请注明出处：http://www.caixw.com/archives/drop-down-menu-with-css3.html

 

网上这种插件很多，但是没一个合适的，大部分都做得很大，功能齐全。于是自己做了这个小插件，顺便学习下jQuery插件的写法。

具体的演示程序在这里：演示程序。

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

1. <!-- 背景遮盖层 -->
2. <div class="dialog-overlay"></div>
3. 
   
4. <!-- 对话框 -->
5. <div class="dialog">
6.   <div class="bar">
7.     <span class="title">标题</span>
8.     <a class="close">[关闭]</a>
9.   </div>
10.   <div class="content">内容部分</div>
11. </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. });