原文：http://bbs.80nian.net/thread-428-1-1.html
百度的
popup.js这个文件中的弹出层方法挺好用的，但是，有些时候，发现在Mozilla Firefox浏览器下弹出层不能正常使用，具体表现为：层不能移动，一起停在页面左下角，遮罩层不能完全遮罩页面。
解决方案：删除被调用页面中的“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”标志。
百度空间的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)!="#ff0000"&&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,width: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;width: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;width:'+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+' </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="width: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=" 确定 "/> <input id="dialogCancel" type="button" value=" 取消 "/></div></div>';
401 //设置alert对话框的具体内容
402 var alert='<div style="width: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;width: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,width: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='width: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,width: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,width: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,width: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="width:300px; height:200px; background-color:#cccccc; color:Red; float:right;">
73 </div>
74 </form>
75</body>
76</html>
77