实现了弹出DIV对话框[原]

关于弹出DIV对话框，网上已经有许多代码可提供参考。愚认为，许多代码具有以下两个缺点。其一、代码都是通过DOM来实现的，很难对它进行修改以适应自己应用。其二、这些弹出的DIV大多注重如何实现弹出的对话框，但并没有强调与页面的交互。

下面实现的弹出DIV对话框，代码简单，同时它通过向网页注册回调方法的，使得与页面的交互非常方便。

布局假设
假设页面的布局如下，Content页面放面main.html下面的一个iframe里面。Divdlg.js由main.html加载。这个布局可以使得js文件不必要在每次请求都需要加载，提高了速度。但是，如果页面不是这样的布局，同样可以工作。

对话框实现原理
     实现图如下。整个对话框显示子系统由半透明的遮罩层，对话框层，iframe页面容器，和对话框内容页面组成。
     显示对话框：显示遮罩层和对话框层，并在iframe中加载对话框内容页面。
     隐藏对话框：隐藏遮罩层和对话框层。

代码实现：接口

对话框参数配置结构
包括内容页面的URL，标题，高宽等一些定制。此外，还包括一个回调函数用来与页面交互。

Code

方法
createDlg：创建对话框
openDialog：打开对话框
hideDialog：关闭对话框
onDialogCallBack：回调事件定义

Code

对象定义

定义对话框配置对象。创建对话框。

Code

如何使用

1.在main.html中加入对jquery.js和divdlg.js文件的引用。

Code

2. 在Content.html中使用对话框。先需要定义两个辅助方法。一个用来打开对话框，另一个则是回调函数。

Code

未完成的功能及改进

1. 对话框拖动。
2. 对Firefox的支持不是太好。显示有点不对。

下载代码及示例：DIV对话框