百度空间的popup效果分析

    自从用firefox浏览器以来，就几乎养成了一个习惯，就想用WebDeveloper把一些漂亮网站的js包括css给down下来分析一下，用来学习。百度空间的弹出窗口和拖拽效果，看起来挺不错的。现在很多知名网站都是用的这样的技术。下面把我down的js代码发出来，我分析了一部分，但是还有很多东西不明白怎么回事，没有写注释的部分，还请高手能帮我解释一下。本人属于初学，有不对的地方还请多多指教。
    在声明一条吧，此代码仅做学习用，技术版权属于百度。
    主要是一个叫做：popup.js的文件，如下：

  1/**//*********************************************** popup.js**************************************************/
  2
  3
  4//为数组Array添加一个push方法
  5//为数组的末尾加入一个对象
  6if(!Array.prototype.push)
  7{
  8    Array.prototype.push=function ()
  9    {
 10        var startLength=this.length;
 11        for(var i=0;i<arguments.length;i++)
 12        {
 13            this[startLength+i]=arguments[i];
 14        }
 15        return this.length;
 16     }
 17 };
 18
 19//对G函数的参数进行处理
 20function G()
 21{
 22    //定义一个数组用来保存参数
 23    var elements=new Array();
 24    //循环分析G中参数的内容
 25    for(var i=0;i<arguments.length;i++)
 26    {
 27        var element=arguments[i];
 28        
 29        //如果参数的类型为string，则获得以这个参数为ID的对象
 30        if(typeof element=='string')
 31        {
 32            element=document.getElementById(element);
 33        }
 34        //如果参数的长度为1
 35        if(arguments.length==1)
 36        {
 37            return element;
 38        }
 39        //将对象加入到数组的末尾
 40        elements.push(element);
 41    };
 42    return elements;
 43};
 44
 45Function.prototype.bind=function (object)
 46{
 47    var __method=this;
 48    return function ()
 49    {
 50        __method.apply(object,arguments);
 51    };
 52};
 53
 54//绑定事件
 55Function.prototype.bindAsEventListener=function (object)
 56{
 57    var __method=this;
 58    return function (event){__method.call(object,event||window.event);};
 59};
 60
 61
 62Object.extend=function (destination,source)
 63{
 64    for(property in source)
 65    {
 66        destination[property]=source[property];
 67    };
 68    return destination;
 69};
 70
 71
 72if(!window.Event)
 73{
 74    var Event=new Object();
 75};
 76
 77Object.extend(
 78    Event,
 79    
 80    {
 81        observers:false,
 82        element:function (event)
 83        {
 84            return event.target||event.srcElement;
 85        },
 86        
 87        isLeftClick:function (event)
 88        {
 89            return (((event.which)&&(event.which==1))||((event.button)&&(event.button==1)));
 90        },
 91        
 92        pointerX:function (event)
 93        {
 94            return event.pageX||(event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
 95        },
 96        
 97        pointerY:function (event)
 98        {
 99            return event.pageY||(event.clientY+(document.documentElement.scrollTop||document.body.scrollTop));
100        },
101        
102        stop:function (event)
103        {
104            if(event.preventDefault)
105            {
106                event.preventDefault();
107                event.stopPropagation();
108            }
109            else 
110            {
111                event.returnValue=false;
112                event.cancelBubble=true;
113            };
114        },
115        
116        findElement:function (event,tagName)
117        {
118            var element=Event.element(event);
119            while(element.parentNode&&(!element.tagName||(element.tagName.toUpperCase()!=tagName.toUpperCase())))
120                element=element.parentNode;
121            return element;
122        },
123        
124        _observeAndCache:function (element,name,observer,useCapture)
125        {
126            if(!this.observers)
127                this.observers=[];
128            if(element.addEventListener)
129            {
130                this.observers.push([element,name,observer,useCapture]);
131                element.addEventListener(name,observer,useCapture);
132            }
133            else if(element.attachEvent)
134            {
135                this.observers.push([element,name,observer,useCapture]);
136                element.attachEvent('on'+name,observer);
137            };
138        },
139        
140        unloadCache:function ()
141        {
142            if(!Event.observers)
143                return;
144            for(var i=0;i<Event.observers.length;i++)
145            {
146                Event.stopObserving.apply(this,Event.observers[i]);
147                Event.observers[i][0]=null;
148            };
149            Event.observers=false;
150        },
151        
152        observe:function (element,name,observer,useCapture)
153        {
154            var element=G(element);
155            useCapture=useCapture||false;
156            if(name=='keypress'&&(navigator.appVersion.match(/Konqueror|Safari|KHTML/)||element.attachEvent))
157                name='keydown';
158            this._observeAndCache(element,name,observer,useCapture);
159        },
160        
161        stopObserving:function (element,name,observer,useCapture)
162        {
163            var element=G(element);
164            useCapture=useCapture||false;
165            if(name=='keypress'&&(navigator.appVersion.match(/Konqueror|Safari|KHTML/)||element.detachEvent))
166                name='keydown';
167            if(element.removeEventListener)
168            {
169                element.removeEventListener(name,observer,useCapture);
170            }
171            else if(element.detachEvent)
172            {
173                element.detachEvent('on'+name,observer);
174            };
175        }
176    }
177);
178
179Event.observe(window,'unload',Event.unloadCache,false);
180
181
182
183var Class=function ()
184{
185    var _class=function ()
186    {
187        this.initialize.apply(this,arguments);
188    };
189    for(i=0;i<arguments.length;i++)
190    {
191        superClass=arguments[i];
192        for(member in superClass.prototype)
193        {
194            _class.prototype[member]=superClass.prototype[member];
195        };
196    };
197    _class.child=function ()
198    {
199        return new Class(this);
200    };
201    _class.extend=function (f)
202    {
203        for(property in f)
204        {
205            _class.prototype[property]=f[property];
206        };
207    };
208    return _class;
209};
210
211
212//改变百度空间的最顶端和最低端的div的id值
213//如果flag为begin，则为弹出状态的id值
214//如果flag为end，则为非弹出状态的id值，即原本的id值
215function space(flag)
216{
217    if(flag=="begin")
218    {
219        var ele=document.getElementById("ft");
220        if(typeof(ele)!="#ff0000"&&ele!=null)
221            ele.id="ft_popup";
222        ele=document.getElementById("usrbar");
223        if(typeof(ele)!="undefined"&&ele!=null)
224            ele.id="usrbar_popup";
225     }
226     else if(flag=="end")
227     {
228        var ele=document.getElementById("ft_popup");
229        if(typeof(ele)!="undefined"&&ele!=null)
230            ele.id="ft";
231        ele=document.getElementById("usrbar_popup");
232        if(typeof(ele)!="undefined"&&ele!=null)
233            ele.id="usrbar";
234     };
235 };
236
237
238
239//**************************************************Popup类弹出窗口***************************************************************
240
241
242var Popup=new Class();
243
244Popup.prototype={ 
245        //弹出窗口中框架的name名称
246        iframeIdName:'ifr_popup',
247    
248        initialize:function (config)
249        {
250            //---------------弹出对话框的配置信息------------------
251            //contentType:设置内容区域为什么类型：1为另外一个html文件 | 2为自定义html字符串 | 3为confirm对话框 | 4为alert警告对话框
252            //isHaveTitle:是否显示标题栏
253            //scrollType：设置或获取对话框中的框架是否可被滚动
254            //isBackgroundCanClick：弹出对话框后，是否允许蒙布后的所有元素被点击。也就是如果为false的话，就会有全屏蒙布，如果为true的话，就会去掉全屏蒙布
255            //isSupportDraging：是否支持拖拽
256            //isShowShadow：是否现实阴影
257            //isReloadOnClose：是否刷新页面，并关闭对话框
258            //width：宽度
259            //height：高度
260            this.config=Object.extend({contentType:1,isHaveTitle:true,scrollType:'yes',isBackgroundCanClick:false,isSupportDraging:true,isShowShadow:true,isReloadOnClose:true,400,height:300},config||{});
261            
262            //----------------对话框的参数值信息------------------------
263            //shadowWidth  ：阴影的宽度
264            //contentUrl   ：html链接页面
265            //contentHtml  ：html内容
266            //callBack     ：回调的函数名
267            //parameter    ：回调的函数名中传的参数
268            //confirmCon   ：对话框内容
269            //alertCon     ：警告框内容
270            //someHiddenTag：页面中需要隐藏的元素列表，以逗号分割
271            //someHiddenEle：需要隐藏的元素的ID列表(和someToHidden的区别是：someHiddenEle是通过getElementById，而someToHidden是通过getElementByTagName，里面放的是对象)
272            //overlay      ：
273            //coverOpacity ：蒙布的透明值
274            this.info={shadowWidth:4,title:"",contentUrl:"",contentHtml:"",callBack:null,parameter:null,confirmCon:"",alertCon:"",someHiddenTag:"select,object,embed",someHiddenEle:"",overlay:0,coverOpacity:40};
275            
276            //设置颜色cColor:蒙布的背景, bColor:内容区域的背景, tColor:标题栏和边框的颜色,wColor:字体的背景色
277            this.color={cColor:"#EEEEEE",bColor:"#FFFFFF",tColor:"#709CD2",wColor:"#FFFFFF"};
278            
279            this.dropClass=null;
280            
281            //用来放置隐藏了的对象列表，在hiddenTag方法中第一次调用
282            this.someToHidden=[];
283            
284            //如果没有标题栏则不支持拖拽
285            if(!this.config.isHaveTitle)
286            {
287                this.config.isSupportDraging=false;
288            }
289            //初始化
290            this.iniBuild();
291        },
292        
293        //设置配置信息和参数内容
294        setContent:function (arrt,val)
295        {
296            if(val!='')
297            {
298                switch(arrt)
299                {
300                    case 'width':this.config.width=val;
301                    break;
302                    case 'height':this.config.height=val;
303                    break;
304                    case 'title':this.info.title=val;
305                    break;
306                    case 'contentUrl':this.info.contentUrl=val;
307                    break;
308                    case 'contentHtml':this.info.contentHtml=val;
309                    break;
310                    case 'callBack':this.info.callBack=val;
311                    break;
312                    case 'parameter':this.info.parameter=val;
313                    break;
314                    case 'confirmCon':this.info.confirmCon=val;
315                    break;
316                    case 'alertCon':this.info.alertCon=val;
317                    break;
318                    case 'someHiddenTag':this.info.someHiddenTag=val;
319                    break;
320                    case 'someHiddenEle':this.info.someHiddenEle=val;
321                    break;
322                    case 'overlay':this.info.overlay=val;
323                };
324            };
325        },
326        
327        iniBuild:function ()
328        {
329            G('dialogCase')?G('dialogCase').parentNode.removeChild(G('dialogCase')):function (){};
330            var oDiv=document.createElement('span');
331            oDiv.id='dialogCase';
332            document.body.appendChild(oDiv);
333        },
334        
335        build:function ()
336        { 
337            //设置全屏蒙布的z-index
338            var baseZIndex=10001+this.info.overlay*10;
339            //设置蒙布上的弹出窗口的z-index(比蒙布的z-index高2个值)
340            var showZIndex=baseZIndex+2;
341            
342            //定义框架名称
343            this.iframeIdName='ifr_popup'+this.info.overlay;
344            
345            //设置图片的主路径
346            var path="http://img.baidu.com/hi/img/";
347            
348            //关闭按钮
349            var close='<input type="image" id="dialogBoxClose" src="'+path+'dialogclose.gif" border="0" width="16" height="16" align="absmiddle" title="关闭"/>';
350            
351            //使用滤镜设置对象的透明度
352            var cB='filter: alpha(opacity='+this.info.coverOpacity+');opacity:'+this.info.coverOpacity/100+';';
353            
354            //设置全屏的蒙布
355            var cover='<div id="dialogBoxBG" style="position:absolute;top:0px;left:0px;100%;height:100%;z-index:'+baseZIndex+';'+cB+'background-color:'+this.color.cColor+';display:none;"></div>';
356            
357            //设置弹出的主窗口设置
358            var mainBox='<div id="dialogBox" style="border:1px solid '+this.color.tColor+';display:none;z-index:'+showZIndex+';position:relative;'+this.config.width+'px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="'+this.color.bColor+'">';
359            
360            //设置窗口标题栏
361            if(this.config.isHaveTitle)
362            {
363                mainBox+='<tr height="24" bgcolor="'+this.color.tColor+'"><td><table style="-moz-user-select:none;height:24px;" width="100%" border="0" cellpadding="0" cellspacing="0" ><tr>'+'<td width="6" height="24"></td><td id="dialogBoxTitle" style="color:'+this.color.wColor+';font-size:14px;font-weight:bold;">'+this.info.title+'&nbsp;</td>'+'<td id="dialogClose" width="20" align="right" valign="middle">'+close+'</td><td width="6"></td></tr></table></td></tr>';
364            }
365            else 
366            {
367                mainBox+='<tr height="10"><td align="right">'+close+'</td></tr>';
368            };
369            
370            //设置窗口主内容区域
371            mainBox+='<tr style="height:'+this.config.height+'px" valign="top"><td id="dialogBody" style="position:relative;"></td></tr></table></div>'+'<div id="dialogBoxShadow" style="display:none;z-index:'+baseZIndex+';"></div>';
372            
373            //如果有蒙布
374            if(!this.config.isBackgroundCanClick)
375            {
376                G('dialogCase').innerHTML=cover+mainBox;
377                G('dialogBoxBG').style.height=document.body.scrollHeight;
378            }
379            else
380            {
381                G('dialogCase').innerHTML=mainBox;
382            }
383            
384            Event.observe(G('dialogBoxClose'),"click",this.reset.bindAsEventListener(this),false);
385            
386            //如果支持拖动,则设置拖动处理
387            if(this.config.isSupportDraging)
388            {
389                dropClass=new Dragdrop(this.config.width,this.config.height,this.info.shadowWidth,this.config.isSupportDraging,this.config.contentType);
390                G("dialogBoxTitle").style.cursor="move";
391            };
392
393            this.lastBuild();
394        },
395        
396        
397        lastBuild:function ()
398        {
399            //设置confim对话框的具体内容
400            var confirm='<div style="100%;height:100%;text-align:center;"><div style="margin:20px 20px 0 20px;font-size:14px;line-height:16px;color:#000000;">'+this.info.confirmCon+'</div><div style="margin:20px;"><input id="dialogOk" type="button" value=" 确定 "/>&nbsp;<input id="dialogCancel" type="button" value=" 取消 "/></div></div>';
401            //设置alert对话框的具体内容
402            var alert='<div style="100%;height:100%;text-align:center;"><div style="margin:20px 20px 0 20px;font-size:14px;line-height:16px;color:#000000;">'+this.info.alertCon+'</div><div style="margin:20px;"><input id="dialogYES" type="button" value=" 确定 "/></div></div>';
403            
404            var baseZIndex=10001+this.info.overlay*10;
405            var coverIfZIndex=baseZIndex+4;
406            
407            //判断内容类型决定窗口的主内容区域应该显示什么
408            if(this.config.contentType==1)
409            {
410                var openIframe="<iframe width='100%' style='height:"+this.config.height+"px' name='"+this.iframeIdName+"' id='"+this.iframeIdName+"' src='"+this.info.contentUrl+"' frameborder='0' scrolling='"+this.config.scrollType+"'></iframe>";
411                var coverIframe="<div id='iframeBG' style='position:absolute;top:0px;left:0px;1px;height:1px;z-index:"+coverIfZIndex+";filter: alpha(opacity=00);opacity:0.00;background-color:#ffffff;'><div>";
412                G("dialogBody").innerHTML=openIframe+coverIframe;
413            }
414            else if(this.config.contentType==2)
415            {
416                G("dialogBody").innerHTML=this.info.contentHtml;
417            }
418            else if(this.config.contentType==3)
419            {
420                G("dialogBody").innerHTML=confirm;Event.observe(G('dialogOk'),"click",this.forCallback.bindAsEventListener(this),false);
421                Event.observe(G('dialogCancel'),"click",this.close.bindAsEventListener(this),false);
422            }
423            else if(this.config.contentType==4)
424            {
425                G("dialogBody").innerHTML=alert;
426                Event.observe(G('dialogYES'),"click",this.close.bindAsEventListener(this),false);
427            };
428        },
429        
430        //重新加载弹出窗口的高度和内容
431        reBuild:function ()
432        {
433            G('dialogBody').height=G('dialogBody').clientHeight;
434            this.lastBuild();
435        },
436        
437        show:function ()
438        {
439            //隐藏一些在info中制定的元素
440            this.hiddenSome();
441            //弹出窗口居中
442            this.middle();
443            //设置阴影
444            if(this.config.isShowShadow)
445                this.shadow();
446        },
447        
448        //设置回调函数
449        forCallback:function ()
450        {
451            return this.info.callBack(this.info.parameter);
452        },
453        
454        //为弹出窗口设置阴影
455        shadow:function ()
456        {
457            var oShadow=G('dialogBoxShadow');
458            var oDialog=G('dialogBox');oShadow['style']['position']="absolute";
459            oShadow['style']['background']="#000";
460            oShadow['style']['display']="";
461            oShadow['style']['opacity']="0.2";
462            oShadow['style']['filter']="alpha(opacity=20)";
463            oShadow['style']['top']=oDialog.offsetTop+this.info.shadowWidth;
464            oShadow['style']['left']=oDialog.offsetLeft+this.info.shadowWidth;
465            oShadow['style']['width']=oDialog.offsetWidth;oShadow['style']['height']=oDialog.offsetHeight;
466        },
467        
468        //让弹出窗口居中显示
469        middle:function ()
470        {
471            if(!this.config.isBackgroundCanClick)
472                G('dialogBoxBG').style.display='';
473            var oDialog=G('dialogBox');
474            oDialog['style']['position']="absolute";
475            oDialog['style']['display']='';
476            var sClientWidth=document.body.clientWidth;
477            var sClientHeight=document.body.clientHeight;
478            var sScrollTop=document.body.scrollTop;
479            //alert("document.body.clientWidth = " + sClientWidth + "\ndocument.body.clientHeight" +sClientHeight);
480            var sleft=(document.body.clientWidth/2)-(oDialog.offsetWidth/2);
481            var iTop=-80+(sClientHeight/2+sScrollTop)-(oDialog.offsetHeight/2);
482            var sTop=iTop>0?iTop:(sClientHeight/2+sScrollTop)-(oDialog.offsetHeight/2);
483            //alert("var iTop=-80+(sClientHeight/2+sScrollTop)-(oDialog.offsetHeight/2);\n" + "sClientHeight is " + sClientHeight + "\nsScrollTop is " + sScrollTop);
484            //alert("iTop is " + iTop);
485            if(sTop<1)
486                sTop="20";
487            if(sleft<1)
488                sleft="20";
489            oDialog['style']['left']=sleft;
490            oDialog['style']['top']=sTop;
491            //alert("sleft is " + sleft);
492            //alert("sTop is " + sTop);
493        },
494        
495        //刷新页面，并关闭当前弹出窗口
496        reset:function ()
497        {
498            if(this.config.isReloadOnClose)
499            {
500                top.location.reload();
501            };
502            this.close();
503        },
504        
505        //关闭当前弹出窗口
506        close:function ()
507        {
508            G('dialogBox').style.display='none';
509            if(!this.config.isBackgroundCanClick)
510                G('dialogBoxBG').style.display='none';
511            if(this.config.isShowShadow)
512                G('dialogBoxShadow').style.display='none';
513            G('dialogBody').innerHTML='';
514            
515            this.showSome();
516        },
517        
518        //隐藏someHiddenTag和someHiddenEle中的所有元素
519        hiddenSome:function ()
520        {
521            //隐藏someHiddenTag中的所有元素
522            var tag=this.info.someHiddenTag.split(",");
523            if(tag.length==1&&tag[0]=="")
524            {
525                tag.length=0;
526            }
527            for(var i=0;i<tag.length;i++)
528            {
529                this.hiddenTag(tag[i]);
530            };
531            //隐藏someHiddenEle中的所有逗号分割的ID的元素
532            var ids=this.info.someHiddenEle.split(",");
533            if(ids.length==1&&ids[0]=="")
534                ids.length=0;
535            for(var i=0;i<ids.length;i++)
536            {
537                this.hiddenEle(ids[i]);
538            };
539            //改变顶部和底部的div的id值为弹出状态的id值,祥见space的实现
540            space("begin");
541        },
542        
543        //隐藏一组元素
544        hiddenTag:function (tagName)
545        {
546            var ele=document.getElementsByTagName(tagName);
547            if(ele!=null)
548            {
549                for(var i=0;i<ele.length;i++)
550                {
551                    if(ele[i].style.display!="none"&&ele[i].style.visibility!='hidden')
552                    {
553                        ele[i].style.visibility='hidden';
554                        this.someToHidden.push(ele[i]);
555                    };
556                };
557             };
558         },
559         
560         //隐藏单个元素
561         hiddenEle:function (id)
562         {
563            var ele=document.getElementById(id);
564            if(typeof(ele)!="undefined"&&ele!=null)
565            {
566                ele.style.visibility='hidden';
567                this.someToHidden.push(ele);
568            }
569         },
570         
571         //将someToHidden中保存的隐藏元素全部显示
572         //并恢复顶部和底部的div为原来的id值
573         showSome:function ()
574         {
575            for(var i=0;i<this.someToHidden.length;i++)
576            {
577                this.someToHidden[i].style.visibility='visible';
578            };
579            space("end");
580         }
581     };
582
583
584
585
586//********************************************************Dragdrop类(拖拽动作)************************************************************
587
588var Dragdrop=new Class();
589
590Dragdrop.prototype={
591        initialize:function (width,height,shadowWidth,showShadow,contentType)
592        {
593            this.dragData=null;
594            this.dragDataIn=null;
595            this.backData=null;
596            this.width=width;
597            this.height=height;
598            this.shadowWidth=shadowWidth;
599            this.showShadow=showShadow;
600            this.contentType=contentType;
601            this.IsDraging=false;
602            this.oObj=G('dialogBox');
603            Event.observe(G('dialogBoxTitle'),"mousedown",this.moveStart.bindAsEventListener(this),false);
604        },
605        
606        moveStart:function (event)
607        {
608            this.IsDraging=true;
609            if(this.contentType==1)
610            {
611                G("iframeBG").style.display="";
612                G("iframeBG").style.width=this.width;
613                G("iframeBG").style.height=this.height;
614            };
615            Event.observe(document,"mousemove",this.mousemove.bindAsEventListener(this),false);
616            Event.observe(document,"mouseup",this.mouseup.bindAsEventListener(this),false);
617            Event.observe(document,"selectstart",this.returnFalse,false);
618            this.dragData={x:Event.pointerX(event),y:Event.pointerY(event)};
619            this.backData={x:parseInt(this.oObj.style.left),y:parseInt(this.oObj.style.top)};
620        },
621        
622        mousemove:function (event)
623        {
624            if(!this.IsDraging)
625                return ;
626            var iLeft=Event.pointerX(event)-this.dragData["x"]+parseInt(this.oObj.style.left);
627            var iTop=Event.pointerY(event)-this.dragData["y"]+parseInt(this.oObj.style.top);
628            if(this.dragData["y"]<parseInt(this.oObj.style.top))
629                iTop=iTop-12;
630            else if(this.dragData["y"]>parseInt(this.oObj.style.top)+25)
631                iTop=iTop+12;
632            this.oObj.style.left=iLeft;
633            this.oObj.style.top=iTop;
634            if(this.showShadow)
635            {
636                G('dialogBoxShadow').style.left=iLeft+this.shadowWidth;
637                G('dialogBoxShadow').style.top=iTop+this.shadowWidth;
638            };
639            this.dragData={x:Event.pointerX(event),y:Event.pointerY(event)};
640            document.body.style.cursor="move";
641        },
642        
643        mouseup:function (event)
644        {
645            if(!this.IsDraging)
646                return ;
647            if(this.contentType==1)
648                G("iframeBG").style.display="none";
649                document.onmousemove=null;
650                document.onmouseup=null;
651                var mousX=Event.pointerX(event)-(document.documentElement.scrollLeft||document.body.scrollLeft);
652                var mousY=Event.pointerY(event)-(document.documentElement.scrollTop||document.body.scrollTop);
653                if(mousX<1||mousY<1||mousX>document.body.clientWidth||mousY>document.body.clientHeight)
654                {
655                    this.oObj.style.left=this.backData["x"];
656                    this.oObj.style.top=this.backData["y"];
657                    if(this.showShadow)
658                    {
659                        G('dialogBoxShadow').style.left=this.backData.x+this.shadowWidth;
660                        G('dialogBoxShadow').style.top=this.backData.y+this.shadowWidth;
661                    };
662                };
663                this.IsDraging=false;
664                document.body.style.cursor="";
665                Event.stopObserving(document,"selectstart",this.returnFalse,false);
666        },
667        
668        returnFalse:function ()
669        {
670            return false;
671        }
672    };
673

将上面对popup.js文件做个引用，下面是对这个js文件进行测试的html页面的代码。你可以回去很方便的测试。

 1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopUpTest.aspx.cs" Inherits="PopUpTest" %>
 2
 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4<html xmlns="http://www.w3.org/1999/xhtml">
 5<head runat="server">
 6    <title>无标题页</title>
 7
 8    <script type="text/javascript" src="Scripts/popup.js"></script>
 9
10    <script type="text/javascript">
11    
12        function ShowIframe()
13        {
14            var pop=new Popup({ contentType:1,isReloadOnClose:false,400,height:500});
15            pop.setContent("contentUrl","Default.aspx");
16            pop.setContent("title","iframe框架示例");
17            pop.build();
18            pop.show();
19        }
20        function ShowHtmlString()
21        {
22            var strHtml = "<table border=1 style='90%; text-align:center;'><tr style='height:40px'><td>ds</td><td>dads</td></tr><tr style='height:40px'><td>dadas</td><td>dasd</td></tr><tr style='height:40px'><td>dadasd</td><td>dsadads</td></tr></table>";
23            var pop=new Popup({ contentType:2,isReloadOnClose:false,340,height:300});
24            pop.setContent("contentHtml",strHtml);
25            pop.setContent("title","html字符串示例");
26            pop.build();
27            pop.show();
28        }
29        function ShowConfirm()
30        {
31            var pop=new Popup({ contentType:3,isReloadOnClose:false,340,height:80});
32            pop.setContent("title","confirm对话框示例");
33            pop.setContent("confirmCon","confirm对话框的内容");
34            pop.setContent("callBack",ShowCallBack);
35            pop.setContent("parameter",{id:"divCall",str:"点击确定后显示的字符串",obj:pop});
36            pop.build();
37            pop.show();
38        }
39        function ShowAlert()
40        {
41            var pop=new Popup({ contentType:4,isReloadOnClose:false,340,height:80});
42            pop.setContent("title","alert警告框示例");
43            pop.setContent("alertCon","alert对话框的内容");
44            pop.build();
45            pop.show();
46        }
47        
48        
49        function ShowCallBack(para)
50        {
51            var o_pop = para["obj"]
52            var obj = document.getElementById(para["id"]);
53            o_pop.close();
54            obj.innerText = para["str"];
55            
56        }
57         
58    </script>
59
60</head>
61<body style="text-align:center;">
62    <form id="form1" runat="server">
63        <div>
64            <a href="javascript:ShowIframe()">iframe框架示例</a>
65            <br />
66            <a href="javascript:ShowHtmlString()">html字符串示例</a>
67            <br />
68            <a href="javascript:ShowConfirm()">confirm对话框示例</a>
69            <br />
70            <a href="javascript:ShowAlert()">alert警告框示例</a>
71        </div>
72        <div id="divCall" style="300px; height:200px; background-color:#cccccc; color:Red; float:right;">
73        </div>
74    </form>
75</body>
76</html>
77

代码一堆一堆的啊！那个拖拽的不是很清楚怎么回事？上面的那个class函数也不清楚到底是怎么弄的。凡是没有写注释的地方，基本上就不是很明白。我找时间再分析分析吧！找时间把其它的注释也给写上。如果大家明白的，还请多多指教，越详细越好。

再次声明，此代码供学习研究用。