jquery dialog对话框插件实例弹层效果

本文章是利用了jquerydialog对话框插件实例弹层效果哦，dialog弹出一个iframe对话框，好了下面我们先来看看实例，然后再告诉你如何实例dialog对话框效果。

(function($){

$.fn.openwidow=function(options){

vardivid="dialog"+math.round(math.random()*100);

varsettings={

id:divid,

width:300,

height:200,

modal:true,

buttons:{

},

show:"explode",

hide:"highlight",

title:"提示",

url:"/test.asp教程x",

close:function(){

$("#"+this.id).remove();

//debugger

if(document.getelementbyid(this.id))

document.body.removechild(document.getelementbyid(this.id));

}

};

if(options){

$.extend(settings,options);

}

$("body").append('<divid="'+settings.id+'"title="dialogtitle"><pclass="loading"></p></div>');

//dialog

$('#'+settings.id).dialog({

autoopen:false,

title:settings.title,

width:settings.width,

height:settings.height,

modal:true,

bgiframe:true,

show:settings.show,

hide:settings.hide,

buttons:settings.buttons,

close:settings.close,

open:function(){

$("#"+settings.id).html('<iframesrc="'+settings.url+'"frameborder="0"height="100%"width="100%"id="dialogframe"scrolling="auto"></iframe>');

},

resizestop:function(){

$("#dialogframe").css教程("width",parseint($(this).css("width"))-5);

$("#dialogframe").css("height",parseint($(this).css("height"))-5);

}

});

$('#'+settings.id).dialog("open");

returnthis;

};

})(jquery);

下面来看看

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

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

<divclass="dialog-overlay"></div>

<!--对话框-->

<divclass="dialog">

<divclass="bar">

<spanclass="title">标题</span>

<aclass="close">[关闭]</a>

</div>

<divclass="content">内容部分</div>

</div>

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

一些基本功能的实现

移动框体

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

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

varmouse={x:0,y:0};

functionmovedialog(event)

{

vare=window.event||event;

vartop=parseint(dialog.css('top'))+(e.clienty-mouse.y);

varleft=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){

vare=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()函数：

varleft=($(window).width()-dialog.width())/2;

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

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

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

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

vartop=parseint(dialog.css('top'))-$(document).scrolltop();

varleft=parseint(dialog.css('left'))-$(document).scrollleft();

$(window).scroll(function(){

dialog.css({'top':$(document).scrolltop()+top,'left':$(document).scrollleft()+left});

});