百度空间的popup效果分析

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

/*********************************************** popup.js**************************************************/
2

//为数组Array添加一个push方法
5

//为数组的末尾加入一个对象
6

if(!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

//对G函数的参数进行处理
20

function 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

//如果参数的类型为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

Function.prototype.bind=function (object)
46

{
47

var __method=this;
48

return function ()
49

{
50

__method.apply(object,arguments);
51

};
52

};
53

//绑定事件
55

Function.prototype.bindAsEventListener=function (object)
56

{
57

var __method=this;
58

return function (event){__method.call(object,event||window.event);};
59

};
60

Object.extend=function (destination,source)
63

{
64

for(property in source)
65

{
66

destination[property]=source[property];
67

};
68

return destination;
69

};
70

if(!window.Event)
73

{
74

var Event=new Object();
75

};
76

Object.extend(
78

Event,
79

{
81

observers:false,
82

element:function (event)
83

{
84

return event.target||event.srcElement;
85

},
86

isLeftClick:function (event)
88

{
89

return (((event.which)&&(event.which==1))||((event.button)&&(event.button==1)));
90

},
91

pointerX:function (event)
93

{
94

return event.pageX||(event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
95

},
96

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

179

Event.observe(window,'unload',Event.unloadCache,false);
180

181

182

183

var 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值
215

function 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

242

var Popup=new Class();
243

244

Popup.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+' </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=" 确定 "/> <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

588

var Dragdrop=new Class();
589

590

Dragdrop.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页面的代码。你可以回去很方便的测试。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopUpTest.aspx.cs" Inherits="PopUpTest" %>
2

<!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

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

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

}
57

</script>
59

</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函数也不清楚到底是怎么弄的。凡是没有写注释的地方，基本上就不是很明白。我找时间再分析分析吧！找时间把其它的注释也给写上。如果大家明白的，还请多多指教，越详细越好。

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