[转载]JQuery弹窗窗口插件

原出处：http://cto.xujun.org/soft/jquery/lhgdialog/

弹出窗口插件介绍

©lhgdialog 是一个使用简单，代码简洁高效且功能强大的弹出窗口插件。
专为大型弹出窗口定制
相对于网上其它弹出窗口插件主要功能是提示信息来说，本插件主要是用来制作窗口中内容较多，页面比较复杂的窗口。本插件的窗口内容面主要是以嵌入iframe框架为主，内容页为一个单独的页面。这样就可以更方便的管理内容页，页面的样式也不受其它页面的影响，而且内容页可以是静态或动态的任何一种文件。
强大灵活的接口机制
由于本插件主要是用来制作大型的窗口，页面和窗口间的交互肯定会非常频繁，所以本插件提供了丰富的交互控制接口，可以非常方便的进行页面间的数据的传输。
完美的jQuery插件
由于本插件所需的lhgcore.min.js库文件就相当于一个精简的jQuery库，所以本插件的代码的书写方式和jQ的一样精简。如果您想把它做的jQ的插件，只要在页面引入jQuery的库（此时不再需要引入lhgcore.min.js库文件），代码作一下非常简单的修改即可。
跨浏览器兼容
兼容：IE6+、Firefox、Chrome、Safari、Opera，浏览器版本越高体验越好。并且IE6下也能支持现代浏览器的静止定位(fixed)，支持覆盖下拉控件。
使用帮助

调用方式
一、使用传统的函数方法调用
function opdlg( id ){
var dlg = new J.dialog({
id: id,
title: '测试页',
html: '欢迎使用lhgdialog弹出窗口插件',
rang: true
});
dlg.ShowDialog();
// 或者这样写
var dlg = new J.dialog({ id: id, ... }).ShowDialog();
}
运行»
二、使用jQ方式调用
J('#btn2').dialog({ id:'test2', page:'value/content.html', cover:true });
运行»
接下来将有几个表格列举lhgdialog的全部功能，你需要的时候可以使用它们。
配置参数
名称 类型 默认值 描述
内容
title 字符串 'lhgdialog弹出窗口' 标题内容。
page 字符串 null 窗口的内容页为一个单独的页面文件，这个文件的路径是内容页面文件相对于调用窗口插件的路径或也可使用绝对路径。如果此参数的值为不同域的外部链接，那一定要使下面的link参数为真
link 布尔 false 是否为外部链接，如果是此参数一定要为真，不然程序会出错
html 字符串 null 窗口的内容页为HTML代码，可以是HTML代码或DOM对象
对象
尺寸
width 数值 400 设置内窗口的宽度
height 数值 300 设置窗口的高度
位置
fixed 布尔 false 开启静止定位
left 数值 'center' X轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'left'、'center'、'right'这些关键字
字符串
top 数值 'center' Y轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'top'、'center'、'bottom'这些关键字
字符串
高级
id 字符串 'lhgdlgId' 自定义对话框ID属性，要保证在页面中是唯一的，不能和页面中任何元素的id相同
cover 布尔 false 开启锁屏。中断用户对话框之外的交互，用于显示非常重要的操作/消息
drag 布尔 true 是否允许用户拖动对话框
resize 布尔 true 是否允许拖动改变窗口大小
rang 布尔 true 是否限制挪动与定位范围
SetTopWindow 对象 null 指定窗口弹出时的页面的window对象，如果是在框架中，你可以指定框架中的任意页面，如不指定则在框架的最顶层页面弹出
regDragWindow 数组 null 注册拖动的页面的window对象数组，这个参数的作用就是拖动时如果滑过没注册的页面时会有停顿的感觉
parent 对象 null 子窗口的父窗口对象，此参数只用在弹出的窗口中再弹出子窗口时指定父窗口对象，具体使用方法参照示例
cusfn 函数 null 自定义函数，注意：只有内容页参数为html时，此参数才可以使用，而使用page参数时此参数不可用
需要对弹出后的对话框操作？下面介绍的就是lhgdialog的控制接口了。
每次生成一个对话框后，它都会返回控制接口，如调用关闭接口，我们可以先定义一个变量引用对话框返回值：
var testDialog = J.dialog({
id: 'testDialog01',
html: '我初始化后会返回控制接口，请注意接收'
});
然后在可以在其他地方调用"cancel"方法关闭对话框：
testDialog.cancel();
如果使用page参数，则要在内容页中引入 frameElement.lhgDG 这个接口对象，例如我示例中的content.html这个内容页示例：
var dg = frameElement.lhgDG;
dg.addBtn( 'close', '取消', dg.cancel );
//这里调用了增加按钮的方法，窗口增加了个取消按钮，此按钮调用了窗口的关闭的方法：cancel()
});
好了，介绍了控制接口的用途，下面就是控制接口列表：
控制接口
名称 返回值 描述
cancel() null 关闭对话框
reDialogSize(width,height) null 重新指定窗口的大小
addBtn(id,txt,fn) null 创建新的按钮
removeBtn(id) null 移除窗口中的按钮
dg {Object} 窗口元素DOM对象，可通过此对象对窗口和窗口内元素进行操作
topWin {Object} 弹出窗口所在的顶层页面的window对象
topDoc {Object} 弹出窗口所在的顶层页面的document对象
curWin {Object} 加载弹出窗口插件的页面的window对象
curDoc {Object} 加载弹出窗口插件的页面的document对象
dgWin {Object} 如果参数为page，且link参数不为真，那这个就是内容页的window对象
dgDoc {Object} 如果参数为page，且link参数不为真，那这个就是内容页的document对象
jQuery + lhgdialog
lhgdialog也可以作为为jQuery的一个插件，首先要引入jQuery的库文件（此时不再需要引入lhgcore.min.js库文件），然后有个地方要改一下，就是lhgdialog.js文件的最后小括号里的代码lhgcore要改成jQuery，修改方法： })(lhgcore)改成 })(jQuery)，方法与参数同上。调用示例：
// 普通调用
function opdlg( id )
{
var dlg = new $.dialog({ id: id, ... }).ShowDialog();
}
// 使用jQuery选择器
$('#btn').dialog({ id:'test2', page:'content.html', cover:true });
演示

窗口内容页间的传值：value/value.html
跨框架下常用方法演示：frameset/iframeTop.html
下载

下载：http://files.cnblogs.com/lhgstudio/lhgdialog.rar
Code license:
GNU Lesser General Public License
应用到你的项目

在页面head引入二个js文件。


注：lhgcore.min.js一定要在lhgdialog.min.js前引入