dklogs

JavaScript实现的弹出窗口是我们常用的控件之一，当然实现也有很多，这里把我写的控件整理一下发出来。

请参看API及演示页面

这里实现了五种弹出窗口，继承自BasePopBox。分别为DialogBox，FrameBox， AlertBox， ConfirmBox，ToastBox。

o
1. DialogBox主要用于显示一般性内容，可以传入页面中的一个Dom对象的Id，也可以是一个Dom对象或者一段HTML字符串用于显示在弹出框中。

o

2. FrameBox需要传入一个URL地址，用于在弹出窗口中显示一个iFrame页面。

o

3. AlertBox用于显示一般的提示信息，类似于JavaScript中的alert弹出框。传入的参数为需要显示的信息。

o

4. ConfirmBox用于显示需要用户需要做出判断的信息，当用户点击“确定”或者“取消”时会触发用户传入的确定事件或者取消事件。

o

5. ToastBox用于显示可以一个可以自动消失的提示信息。

另外系统还提供了一个可配置参数集合用于界面，以及自定义按钮等的配置。

这里没有使用同一个对象，通过传入不同状态参数的方式来实现不同效果的弹出窗口，而是通过采用继承自相同的父对象，在子对象中通过重载相关的方法来实现不同的效果。这样提高组件的可重用性和可扩展性，甚至如果你的页面只需要一种弹出窗口你可以只引用一种弹出窗口的实现，相应的也减少了文件的体积。

在易用性方面，系统提供了基本的五种模式用于选择，基本可以满足大部分情况的需求。当然一个控件不可能同时满足所有用户的需求，所以一个控件的可扩展性也是很重要的。可以在继承基础类的基础上通过重载需要的方法来实现自己需要的效果，其它相应的处理交给基类来实现，减少开发的代码量，提高了重复使用的效率（当然需要看一下基类中有哪些方法是需要付出的代价:P）。

目前尚未做IE6的兼容测试

使用JavaScript模仿消息提示框效果（兼容IE6+，FireFox）

点击下载popbox源代码

如有谬误请不吝赐教。

2011.08.18更新

o
1. 修正FrameBox拖动时容易丢失mouseup事件的bug

o

2. 更新dragmanaer，添加拖动开始，进行，结束事件回调，添加setCapture和releaseCapture相关处理

转载请注明原文出处《JavaScript弹出窗口控件》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。