mootools系列：打造属于你自己的Popup（弹出框）——基本结构篇
你是否早已厌倦了alert、confirm、window.open等等呆板丑陋的web弹出形式？如果你也和我一样对此耿耿于怀，那就跟随我一起来打造专属于我们自己的Popup吧！
自定义弹出框目前在网络上的应用越来越广泛，各种版本的实现代码也是铺天盖地。其基本思路无外乎是在html Dom中创建一弹出框结构，并将其置于其他Dom对象之上。
本文应用mootools框架，将从功能、外观和应用三个层面阐述弹出框实现及使用的基本脉络。大家可以在此基础之上对其进行改造、拓展，烙上专属你自己的个性烙印。
先看一下最终效果图。
弹出框构造结构
我将弹出框构造为一9格table。四周格为装饰边框，中间的一格为主体，包括Title、Content和Footer三部分。
其对应的代码结构为：
2 <tr>
3 <td id ="topLeft"></td>
4 <td id ="topCenter"></td>
5 <td id ="topRight"></td>
6 </tr>
7 <tr>
8 <td id ="middleLeft"></td>
9 <td id ="middleCenter">
10 <h3 id ="title">
11 <div id ="closeBtn">&http://www.cnblogs.com/#215;</div>
12 <div>Title</div>
13 </h3>
14 <div id ="content" style ="width:280px; height :150px">Msg Box</div>
15 <div id ="footer">Footer</div>
16 </td>
17 <td id ="middleRight"></td>
18 </tr>
19 <tr>
20 <td id ="bottomLeft"></td>
21 <td id ="bottomCenter"></td>
22 <td id ="bottomRight"></td>
23 </tr>
24 </table>
代码中编程实现弹出框，即为依次创建上述结构的过程，在此就不一一罗列了，感兴趣的朋友可以下载示例代码。
mootools中class的构造机理
在mootools框架中，类class的结构如下所示：
2 &http://www.cnblogs.com/#8230; &http://www.cnblogs.com/#8230;
3 initialize:function([para[, para[, &http://www.cnblogs.com/#8230;]]]){
4 &http://www.cnblogs.com/#8230; &http://www.cnblogs.com/#8230;
5 },
6 &http://www.cnblogs.com/#8230; &http://www.cnblogs.com/#8230;
7 });
initialize为mootools中类的构造函数（constructor），是代码执行的入口。
mootools中名为Options的工具类为我们提供了很好的组织类一级变量的机制。在这种机制下，我们将类一级变量定义在options对象中，然后通过在类中实现（implement）此工具类，可以便捷的设置定义在options对象中的变量。以下代码示意了添加options对象后的类结构：
2 &http://www.cnblogs.com/#8230; &http://www.cnblogs.com/#8230;
3 implements:Options,
4 options:{
5 width:220px,
6 height:140px
7 },
8 initialize:function(option){
9 this.setOptions(option); //setOptions为Options工具类中的方法，已被当前类实现
10 //用传递来的option为options对象中的相应变量赋值
11 &http://www.cnblogs.com/#8230; &http://www.cnblogs.com/#8230;
12 },
13 &http://www.cnblogs.com/#8230; &http://www.cnblogs.com/#8230;
14 });
附示例代码：iSunPopup.rar
相关文章：
mootools系列：打造属于你自己的Popup（弹出框）&http://www.cnblogs.com/#8212;&http://www.cnblogs.com/#8212;扩展功能篇
mootools系列：打造属于你自己的Popup（弹出框）&http://www.cnblogs.com/#8212;&http://www.cnblogs.com/#8212;外观及应用篇