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});
});