半夜三更抱着电脑在床上写这篇文章，起因是我之前下载了很多网上的javascript弹出层类，几乎没有一个让我满意。要么就功能不完善，无法满足基本应用；要么就是设计过度，无法二次开发（连编写风格都困难）。
弹出层大多运用在交互比较频繁的网站中，如FaceBook，校内，开心，163Mail等，它取代了浏览器自带的警告提示和模态窗口，具有更好的易用性。它让web如桌面软件一样易用。
我很想根据自己思路重新编写，但是自己在javascript方面的能力与精力都有限，只得在这里念叨，给个思路，顺便贴个XHTML和CSS架构实例，让做这方面开发的朋友有个明确的方向。
说到弹出层，必然会用到lightBox效果。lightBox第一次出现在互联网上的时候，每个人都感觉会很绚丽，如果交互比较频繁的网站lightBox遮罩不要到处用，会严重干扰用户的！
备注：标记“*”号的表示我的演示代码已经实现（主要是CSS控制的）
开发原则：减少用户交互的时间。精简代码，功能见好即收
什么时候要用到lightBox遮罩？
- 显示重要消息。防止用户误操作，用lightBox屏蔽网页元素
- 面积比较大的弹出层。减少视觉干扰，如qzone个人中心的快速相册
lightBox遮罩基本功能
- 弹出层居中显示*
- 屏蔽滚动条（无需计算页面高度，直接height:100%可以省很多代码）*
- 屏蔽ESC之外的快捷键（无须禁止选择和右键）
保证易用性：
- 高度自适应消息内容*
- 内容撑开预定宽度或高度的时候不导致弹出层变形（尽量不使用滚动条）*
- XHTML布局架构（建议使用table进行九宫格布局）可方便用CSS制作圆角边框、半透明边框、投影风格*
- 少量文本居中对齐，反之居左对齐*
- ESC键可关闭弹出层*
- Tab键可操作，能显示焦点边线（按钮不要使用div模拟就可以了）*
- 鼠标可拖动层*
- 可在靠近鼠标指针附近弹出层（注意鼠标指针与浏览器视口边距）*
- 按钮提供交基本的互视觉反馈（鼠标靠近，离开，按下，拖动）*
- 屏蔽拖出可操作范围（尤其是上方浏览器视口和左侧，不然拖不回来了）*
- 静止定位IE6无抖动（技术上可实现这个，但是静止定位大多数情况下无实际意义用途，仅仅是视觉效果）*
- 用户缩放文本的时候框架不变形*
避开误区：
- 滥用遮罩层（遮罩屏蔽了用户操作，强[jian]用户视觉）
- 滥用静止定位（默认应该不跟随页面滚动）
- 滥用屏蔽右键等操作（用户反感）
- 过于侧重javascript视觉效果（尽量使用CSS）
- 过于追求IE6等低级浏览器与高级浏览器视觉保持高级体验（不反对解决IE6的BUG，但反对用N多代码装扮它）
唐斌，个人网站：planeArt.cn
http://www.planeart.cn/2010/01/21/javascript弹出层设计与易用性的思考/