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

时间:2022-06-25 23:53:00

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

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

 

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

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

 

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

 

代码实现:接口

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

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


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

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

 

对象定义

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

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

 

如何使用

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

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

 

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

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

 

 

未完成的功能及改进

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

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