关jQuery弹出窗口简单实现代码-javascript编程.docx

关jQuery弹出窗口简单实现代码-javascript编程关jQuery弹出窗口简单实现代码-javascript编程今天讲了Jquery的弹出窗口的组成和用法：先把引用文件的代码写好：//每个弹窗的标识varx=0;varidzt=newArray();varWindow=function(config){//ID不重复idzt[x]="zhuti"+x;//弹窗ID//初始化，接收参数this.config={width:config.width||300,//宽度height:config.height||200,//高度buttons:config.buttons||'',//默认无按钮title:config.title||'标题',//标题content:config.content||'内容',//内容isMask:config.isMask==falsefalse:config.isMask||true,//是否遮罩isDrag:config.isDrag==falsefalse:config.isDrag||true,//是否移动};//加载弹出窗口varw=($(window).width()-this.config.width)/2;varh=($(window).height()-this.config.height)/2;varnr="";$("body").append(nr);//加载弹窗标题varcontent=""+this.config.title+"×";//加载弹窗内容varnrh=this.config.height-75;content=content+""+this.config.content+"";//加载按钮content=content+""+this.config.buttons+"";//将标题、内容及按钮添加进窗口$('#'+idzt[x]).html(content);//创建遮罩层if(this.config.isMask){varzz="";$("body").append(zz);$("#zz").css('display','block');}//最大最小限制，以免移动到页面外varmaxX=$(window).width()-this.config.width;varmaxY=$(window).height()-this.config.height;varminX=0,minY=0;//窗口移动if(this.config.isDrag){//鼠标移动弹出窗$(".title").bind("mousedown",function(e){varn=$(this).attr("bs");//取标识//使选中的到最上层$(".zhuti").css("z-index",3);$('#'+idzt[n]).css("z-index",4);//取初始坐标varendX=0,//移动后X坐标endY=0,//移动后Y坐标startX=parseInt($('#'+idzt[n]).css("left")),//弹出层的`初始X坐标startY=parseInt($('#'+idzt[n]).css("top")),//弹出层的初始Y坐标downX=e.clientX,//鼠标按下时，鼠标的X坐标downY=e.clientY;//鼠标按下时，鼠标的Y坐标//绑定鼠标移动事件$("body").bind("mousemove",function(es){endX=es.clientX-downX+startX;//X坐标移动end