快捷搜索:

jQuery Dialog 弹出层对话框插件

网上这种插件很多,然则没一个相宜的,大年夜部分都做得很大年夜,功能齐备。于是自己做了这个小插件,顺便进修下jQuery插件的写法。

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

class="dialog-overlay">

class="dialog">

class="bar">

class="title">标题

class="close">[关闭]

class="content">内容部分

这便是两个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});

});

转自:http://www.cnblogs.com/caixw/archive/2010/08/09/jquery-plugin-dialog.html

您可能还会对下面的文章感兴趣: