测试页面需要引用jquery的js文件 插件文件jquery.Jwin.js

jquery.Jwin插件的使用参数都有详细说明，代码如下：

(function($) {var imgdir = 'images/';//图片文件夹路径var    autoHide=false;//悬浮div是否自动隐藏var    hideType='hide';//隐藏的方式 可选参数 hide、slide、fadevar    hideDelay=0;//悬浮div隐藏过程使用的时间var    hideTime=0;//悬浮div延迟隐藏时间var    zIndex=100;//多个div时获取焦点的div处于顶层var    showType='show';//悬浮div显示方式 可选参数 hide、slide、fadevar    showTime=0;//悬浮div显示过程使用的时间var    showDelay=0;//悬浮div延迟显示的时间//以下两个变量用于保证div被拖动后隐藏  再次打开后出现的位置仍然为首次出现的位置var oldTop='';//保存div初次出现的topvar oldLeft='';//保存div初次出现的left
$.fn.extend({Jwin:function(option){var op=$.extend({id:'',//悬浮div的id  （必须）title: '',//标题message:'',//显示信息elementId:'',//显示元素的idurl: '',//显示的页面地址width: 400,//悬浮div的宽度height: 300,//悬浮div的高度clickClose:false,//点击div之外的地方关闭div//悬浮div显示参数showType:'show',//悬浮div显示方式 可选参数 hide、slide、fadeshowTime:0,//悬浮div显示过程使用的时间showDelay:0,//悬浮div延迟显示的时间//悬浮div隐藏参数autoHide:false,//悬浮div是否自动隐藏hideType:'hide',//隐藏的方式 可选参数 hide、slide、fadehideTime:0,//悬浮div隐藏过程使用的时间hideDelay:0,//悬浮div自动隐藏延迟时间
},option);if(op.id==''){alert("缺少WinId");return;}autoHide=op.autoHide;hideType=op.hideType;hideDelay=op.hideDelay;hideTime=op.hideTime;showType=op.showType;showTime=op.showTime;showDelay=op.showDelay;zIndex= zIndex + 1;var winEle = $("#"+op.id);if(winEle.length == 0){this.width =parseInt(op.width);this.height =parseInt(op.height);var banner=this.JwinCreatBanner(op.id,this.width,op.title);oldTop= this.height >= document.documentElement.clientHeight ? 0 : (document.documentElement.clientHeight-this.height)/2;oldLeft = this.width >= document.body.clientWidth ? 0 : (document.body.clientWidth-this.width)/2;//创建div元素win=$('<div id="' + op.id + '"></div>');win.css({'position':'absolute','top':oldTop,'left':oldLeft,'width':(this.width+2),'zIndex':(zIndex+1),'display':'none'});win.html(banner);win.find("#close").bind('click',function(){$(this).JwinClose(op.id);});win.find("#bannerMiddle").bind('mousedown',function(){$(this).JwinMove(op.id);});//创建内容容器var container=$('<div id="' + op.id + '_con"></div>');container.css({'float':'left','width':+this.width,'height':this.height,'word-break':'break-all','overflow-x':'hidden','overflow-y':'auto','border':'1px solid #1972e1','background-color':'#FFF','clear':'both'});if(op.message.length>0){container.css('text-align','center');container.append(op.message);}else if(op.url.length>0){var iframe=$('<iframe frameborder="0"></iframe>');iframe.css({'width':'100%','height':'100%','overflow':'visible','border':'0'});iframe.attr('src',op.url);container.append(iframe);}else if(op.elementId.length>0){var element=$("#"+op.elementId);if(element){                        container.append(element);element.show();}}win.append(container);$(document.body).append(win);this.JwinShow(win);//是否设点击页面隐藏divif(op.clickClose){setTimeout(function(){win.focus();},0);win.bind('blur',function(){$(this).JclickHide(op.id)});    }//是否设置自动关闭if(autoHide){this.JwinHide(win);}}else{winEle.css({'zIndex':(zIndex+1),'top':oldTop,'left':oldLeft});this.JwinShow(winEle);if(op.clickClose){setTimeout(function(){win.focus();},0);win.bind('blur',function(){$(this).JclickHide(op.id)});    }}            },//创建标题JwinCreatBanner:function(winId,width,title){var bannerImddleWidth = width-47;//拖动部分div宽度为总宽度减去两边圆角宽度、关闭按钮宽度var banner = '<div  style="folat:left;width:'+(width+2)+';clear:both;font-size:14px;font:Arial,Helvetica,sans-serif;color:#FFF;">';banner+= '<div style="width:14px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner_left.gif) no-repeat;"></div>';banner+= '<div id="bannerMiddle" style="width:'+bannerImddleWidth+'px;height:30px;float:left;line-height:30px;cursor:move;float:left;text-align:left;background:url('+imgdir+'windows_banner.gif)  repeat-x;" >'+title+'</div>';            banner+= '<div  style="width:21px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner.gif)  repeat-x;"><img style="border:0;margin-top:4px;" id="close" src="'+imgdir+'win_close_normal.gif" οnmοuseοver="this.src=\''+imgdir+'win_close_hover.gif\'"  οnmοuseοut="this.src=\''+imgdir+'win_close_normal.gif\'" /></div>';banner+= '<div style="width:14px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner_right.gif) no-repeat;"></div>';banner+= '</div>';returnbanner;},//拖动JwinMove:function(winId){var floatWin=document.getElementById(winId);zIndex=zIndex+1;floatWin.style.zIndex=zIndex;o=window.event.srcElement||window.event.target;var d=document;var a=window.event;var x=a.layerX?a.layerX:a.offsetX;var y=a.layerY?a.layerY:a.offsetY;if(o.setCapture){o.setCapture();}else if(window.captureEvents){window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}d.onmousemove=function(a){if(!a)a=window.event;if(!a.pageX)a.pageX=a.clientX;if(!a.pageY)a.pageY=a.clientY;var tx=a.pageX-x,ty=a.pageY-y;var maxx=document.documentElement.clientWidth-floatWin.clientWidth;var maxy=document.documentElement.clientHeight-floatWin.clientHeight;tx=(tx<0)?0:tx;ty=(ty<0)?0:ty;tx=(tx>maxx)?maxx:tx;ty=(ty>maxy)?maxy:ty;                    floatWin.style.left=tx;floatWin.style.top=ty;                   };d.onmouseup=function(){if(o.releaseCapture){o.releaseCapture();}else if(window.captureEvents){window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}               d.onmousemove=null;d.onmouseup=null;};},//显示JwinShow:function(win){var t =showDelay;switch(showType){case 'slide':setTimeout(function(){win.slideDown(showTime);}, t);break;case 'fade':setTimeout(function(){win.fadeIn(showTime);},t);break;default:setTimeout(function(){win.show();},t);break;}},//点击隐藏JclickHide:function(winId){                $(document).bind('click',function(){var flag=true;var ele=window.event.srcElement||event.target;$(ele).parents().each(function(){if($(this).attr("id")==winId){flag=false;}});if(flag){$(this).JwinClose(winId);    }    })        },//隐藏JwinHide:function(winId,atonce){var win = $("#"+winId);var t = atonce ? 0: hideDelay;switch(hideType){case 'slide':setTimeout(function(){win.slideUp(hideTime);}, t);break;case 'fade':setTimeout(function(){win.fadeOut(hideTime);},t);break;default:setTimeout(function(){win.hide();},t);break;}win.unbind('blur');$(document).unbind('click');},//关闭JwinClose:function(winId){this.JwinHide(winId,true);}});
})(jQuery)

页面调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>无标题文档</title>
<scriptlanguage="javascript"src="js/jquery-1.4.2.min.js"type="text/javascript"></script>
<scriptlanguage="javascript"src="js/jquery.Jwin.js"type="text/javascript"></script>
<scriptlanguage="javascript"type="text/javascript">$(document).ready(function(){/*$("#btn").Jwin({id:'myid',width:'600px',title:'我的标题',message:'sdfsdfsd',//autoHide:true,//elementId:'d1',//url:'test.html'//hideType:'hide',hideTime:500,hideDelay:'2000'});*//*$('#btn1').Jwin({id:'myid1',width:'100px',title:'我的标题',message:'message',//autoHide:true,//elementId:'d1',//url:'test.html'hideType:'fade',hideTime:500,hideDelay:'2000',showType:'show',showTime:1000,showDelay:1000});*///$(document).bind('click',function(){alert('ddd');});
});functions(){$(this).Jwin({id:'myid1',width:'300px',title:'我的标题',message:'message',//autoHide:true,//elementId:'d1',//url:'test.html'
hideType:'hide',hideTime:500,hideDelay:'2000',clickClose:true//showType:'show',//showTime:1000,//showDelay:1000
});//$(document.body).bind('click',function(){alert('ddd');});
}functions2(){$(this).Jwin({id:'myid2',width:'600px',title:'我的标题2',//message:'message2',//autoHide:true,//elementId:'d1',//url:'test.html'//hideType:'hide',
url:'test.html',hideTime:500,hideDelay:'2000'//,//clickClose:true
});}</script>
</head><body>
<inputtype="button"id="btn1"value="show"onclick="s()" />
<inputtype="button"id="btn1"value="show"onclick="s2()" /></body>
</html>