jQuery方式和普通函数式
jQuery方式调用
J(function(){
J('#btn1').dialog({ id:'test1', html:'<h3>我是jQuery方式调用的窗口</h3>' });
});
普通函数方式调用
function opdg( id ){
var dg = new J.dialog({ id:id, html:'<h3>我是普通函数方式调用的窗口</h3>' });
dg.ShowDialog();
}
常规配置参数使用演示
开启遮罩层，锁定屏幕，并消除浏览器右边滚动条(3.5.2新增)
J('#btn14').dialog({ id:'test14', cover:true, html:'我不能对页面进行操作了', lockScroll:true });
使用chrome皮肤的窗口(3.5.0新增)
J('#btn41').dialog({ id:'test41', skin:'chrome', html:'我是使用了chrome皮肤的窗口' });
重新设定取消按钮的文本，并改变取消按钮关闭窗口的默认动作(3.4.2新增)
J('#btn37').dialog({ id:'test37', skin:'aero', cancelBtnTxt:'确定', onCancel:function(){alert('我成了确定按钮了');}, html:'我改变了取消按钮' });
浏览器大小改变后窗口位置也改变(3.4.2新增)
J('#btn38').dialog({ id:'test38', autoPos:{left:'center',top:'center'}, html:'我的位置随着浏览器的大小的改变而改变' });
设置遮罩层颜色为黑色，透明度为0.4(3.4.1新增)
J('#btn34').dialog({ id:'test34', cover:true, bgcolor:'#000', opacity:0.2, html:'遮罩层的颜色被我设成黑的了' });
双击标题栏可最大化还原窗口(3.4.1新增)
J('#btn35').dialog({ id:'test35', html:'我可以通过双击标题栏最大化和还原窗口了' });
通过按钮实现窗口最大化还原(3.4.1新增)
J('#btn36').dialog({ id:'test36', html:'我是通过按钮来实现的最大化和还原' });
最大化»
不显示最大化按钮示例(3.4.0新增)
J('#btn28').dialog({ id:'test28', maxBtn:false, title:'不显示最大化按钮', html:'我不显示最大化的按钮了' });
显示最小化按钮示例(3.4.0新增)
J('#btn29').dialog({ id:'test29', minBtn:true, title:'显示最小化按钮', html:'我显示最小化的按钮了' });
2秒钟后自动关闭窗口示例(3.4.0新增)
J('#btn30').dialog({ id:'test30', timer:2, title:'2秒钟后自动关闭窗口', html:'我2秒钟后自动关闭了' });
id为"test3"的窗口标题为"我更改了标题"示例
J('#btn3').dialog({ id:'test3', title:'我更改了标题', html:'我的id是test3，我是标题是"我更改了标题"' });
设置窗口的大小
J('#btn4').dialog({ id:'test4', width:300, height:200, html:'窗口的大小改为300X200' });
是否显示标题栏
此示例请参照皮肤制作里的示例，因为注意如果不显示一定要选择相应的皮肤，无标题栏的皮肤，而且设为不显示后iconTitle,xButton参数都无效了。
不显示窗口左边小图标
J('#btn5').dialog({ id:'test5', iconTitle:false, html:'我不显示窗口左边的小图标' });
不显示窗口右边的X关闭按钮
J('#btn6').dialog({ id:'test6', xButton:false, html:'我不显示窗口右边的X关闭按钮' });
不显示窗口下方的按钮栏
J('#btn7').dialog({ id:'test7', btnBar:false, html:'我不显示按钮栏' });
不显示窗口按钮栏上的取消按钮
J('#btn8').dialog({ id:'test8', cancelBtn:false, html:'我不显示取消按钮' });
内容页参数为page且为content.html文件
J('#btn9').dialog({ id:'test9', page:'content.html' });
内容页参数为page且内容为外部链接qq.com，此时注意link参数一定要设为true
J('#btn10').dialog({ id:'test10', page:'http://www.qq.com', link:true, width:800, height:600, title:'QQ首页' });
内容页参数为html且html值为DOM对象
J('#btn11').dialog({ id:'test11', html:J('#obj')[0] });
开启静止定位，并自定义窗口弹出的位置
J('#btn12').dialog({ id:'test12', html:'我可以随屏滚动', fixed:true, left:100, top:100 });
开启静止定位，并将窗口定位在右下角
J('#btn13').dialog({ id:'test13', html:'我可以做为右下角的消息窗口', fixed:true, left:'right', top:'bottom' });
不允许拖动和改变大小
J('#btn15').dialog({ id:'test15', drag:false, resize:false, html:'我不能拖动和改变大小了' });
不请允许拖出浏览器可视域
J('#btn16').dialog({ id:'test16', rang:true, html:'我不能拖出浏览器了' });
改变加载窗口时的提示文本
J('#btn17').dialog({ id:'test17', loadingText:'我是窗口加载时的提示文本，哈哈...', html:'' });
自适窗口内容的大小
J('#btn18').dialog({ id:'test18', width:300, height:200, autoSize:true, page:'content1.html' });
parent参数示例并且父子窗口都加了遮罩层
//这里调用窗口都用的普通函数方式
function opdg1(){
var testDG = new J.dialog({ id:'test19', page:'content2.html', cover:true });
testDG.ShowDialog();
}
//内容页content2.html里的代码为：
var DG = frameElement.lhgDG;
function opChild()
{
var testDG2 = new DG.curWin.J.dialog({ id:'child', cover: true, html:'我是子窗口', width:300, height:200, parent:DG });
testDG2.ShowDialog();
}
//你可以打开content2.html页面查看里面的代码，这里要注意如果想在窗口中弹出子窗口不要在子窗口的页面中再加载lhgdialog.min.js来调用弹出窗口的函数，一定要用curWin.J.dialog，因为不这样父子窗口间的zIndex值会是2个，它们层叠的次序就乱了。
dgOnLoad参数示例
// 这是使用html参数时dgOnLoad代码 前面的运行按钮
function opdg2()
{
var testDG1 = new J.dialog({
id:'test20',
html:'<h3 id="txt">lhgdialog</h3>',
dgOnLoad:function(){
J('#txt').html( '我使用dgOnLoad参数改变了文本' );
}
});
}
// 这里使用的page参数时dgOnLoad代码 后面的运行按钮
function opdg3()
{
var testDG2 = new J.dialog({
id:'test21',
page:'content3.html',
dgOnLoad:function(){
J('#txt',testDG2.dgDoc).html( '我原来的文本是lhgdialog' );
}
});
}
onXclick参数示例
J('#btn22').dialog({ id:'test22', onXclick:function(){alert('我改变了关闭按钮的事件，我不能关闭窗口了');}, html:'X关闭按钮的事件被改变了' });
onCancel参数示例
J('#btn23').dialog({ id:'test23', onCancel:function(){alert('我是在窗口关闭前执行的函数');}, html:'关闭窗口前执行onCancel函数' });
其它演示示例
使用closeTime的第2个和第3个参数在标题栏动态显示关闭的秒数(3.4.2新增，3.5.2修改)
J('#btn40').dialog({ id:'test40', page:'content10.html' });
//content10.html页面里的代码为：
var DG = frameElement.lhgDG;
dg.closeTime( 10, function(){ dg.SetTitle('窗口将在10秒钟后自动关闭'); var n = 9; setInterval(function(){ dg.SetTitle('窗口将在'+n+'秒钟后自动关闭'); n--; }, 1000); }, function(){ alert('我是窗口关闭后执行的函数'); });
使用SetCancelBtn方法改变取消按钮(3.4.2新增)
J('#btn39').dialog({ id:'test39', page:'content9.html' });
//content9.html页面里的代码为：
var DG = frameElement.lhgDG;
dg.SetCancelBtn( '确定', function(){ alert('我变成确定按钮了，我执行完这句再关闭窗口'); dg.cancel(); });
在内容页中重新指定窗口标题(3.4.0新增)
J('#btn31').dialog({ id:'test31', page:'content6.html' });
//content6.html页面里的代码为：
var DG = frameElement.lhgDG;
function ok()
{
DG.SetTitle( '我是被按钮改变了的标题' );
}
在内容页中重新指定X按钮绑定的函数(3.4.0新增)
J('#btn32').dialog({ id:'test32', page:'content7.html' });
//content7.html页面里的代码为：
var DG = frameElement.lhgDG;
DG.SetXbtn( ok );
function ok()
{
alert( '我又不能关闭窗口了' );
}
在内容页中使用closeTime函数来定时关闭窗口(3.4.0新增)
J('#btn33').dialog({ id:'test33', page:'content8.html' });
//content8.html页面里的代码为：
var DG = frameElement.lhgDG;
DG.closeTime( 2 );
在调用页面关闭窗口
// 这里请注意DG得定义成全局变量
testDG3 = J('#btn24').dialog({ id:'test24', html:'我只能被调用页面上的按钮关闭', xButton:false, btnBar:false });
//关闭窗口按钮的单击事件
onclick="testDG3.cancel();"
关闭窗口»
关闭窗口刷新父页面
J('#btn25').dialog({ id:'test25', page:'content4.html' });
//content4.html页面里的代码为：
var DG = frameElement.lhgDG;
DG.addBtn( 'ok', '确定', ok );
function ok()
{
// 这里写你要操作的代码，最后写刷新代码
DG.curWin.location.reload();
}
//当调用窗口的页面被刷新，窗口就会自动关闭，所以不用调用程序的cancel关闭函数
父窗口中打开子窗口
请参阅 常规配置参数使用演示 里的 parent参数示例并且父子窗口都加了遮罩层 示例
重新指定窗口的大小并将窗口定位在屏幕的中间(3.4.0新增)
var reSize = function()
{
testDG4.reDialogSize( 600, 500 ); testDG4.SetPosition( 'center', 'center' );
};
var testDG4 = J('#btn26').dialog({ id:'test26', html:'我的大小被改为600X500了', dgOnLoad: reSize });
增加新的按钮和移除按钮
J('#btn27').dialog({ id:'test27', page:'content5.html' });
将调用页面的值传到窗口中
// 这是运行1按钮使用的方法
J('#btn1').dialog({ id:'test1', page:'content.html' });
// content.html里的代码为：(这里注意content.html也加载了lhgcore.min.js文件)
var DG = frameElement.lhgDG;
J(function(){
J('#val').html( J('#txt1',DG.curDoc).val() );
});
// 这是运行2按钮使用的方法
function opdg1()
{
var DG = new J('#btn2').dialog({
id:'test2',
page:'content1.html',
dgOnLoad: function(){
J('#val',DG.dgDoc).html( J('#txt1').val() );
}
});
DG.ShowDialog();
}
//使用第2种方法content1.html里不用写任何代码
运行1» 运行2»
将窗口中的值传回到调用页面中
J('#btn3').dialog({ id:'test3', page:'content2.html' });
// content2.html里的代码为：(这里注意content2.html也加载了lhgcore.min.js文件)
var DG = frameElement.lhgDG;
DG.addBtn( 'ok', '确定', ok );
function ok()
{
J('#txt2',DG.curDoc).val( J('#val').html() );
DG.cancel();
}
特殊的传值示例
在调用页面调用窗口B中的值或函数
var DG = J('#btn4').dialog({ id:'test4', page:'content3.html', title:'B窗口' });
// 调用B窗口中文本框的值的按钮的代码
J('#btn5').bind( 'click', function(){
if( DG.dg )
alert( J('#inp',DG.dgDoc).val() );
else
alert( '请先打开B窗口' );
});
// 调用B窗口的函数的按钮的代码
J('#btn6').bind( 'click', function(){
if( DG.dg )
DG.dgWin.BB();
else
alert( '请先打开B窗口' );
});
调用B窗口中文本框的值» 调用B窗口的函数»
在B窗口中调用调用页面的值或函数
J('#btn7').dialog({ id:'test7', page:'content4.html', title:'B窗口' });
// 内容页content4.html的代码为：(这里注意content4.html也加载了lhgcore.min.js文件)
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
alert( J('#txt3',DG.curDoc).val() );
});
J('#btn2').bind( 'click', function(){
DG.curWin.AA();
});
});
在调用页面调用C窗口(也就是B窗口的子窗口)的值或函数
var DG1 = J('#btn8').dialog({ id:'test8', page:'content5.html', title:'B窗口' });
// 调用C窗口中文本框的值的按钮的代码
J('#btn9').bind( 'click', function(){
if( DG1.dg && DG1.dgWin.testDG )
alert( J('#inp',DG1.dgWin.testDG.dgDoc).val() );
else
alert( '请先打开C窗口' );
});
// 调用C窗口的函数的按钮的代码
J('#btn10').bind( 'click', function(){
if( DG1.dg && DG1.dgWin.testDG )
DG1.dgWin.testDG.dgWin.CC();
else
alert( '请先打开C窗口' );
});
// 内容页content5.html中的代码：
var DG = frameElement.lhgDG, testDG;
function opchild()
{
testDG = new DG.curWin.J.dialog({
id: 'child1',
page: 'content6.html'
});
testDG.ShowDialog();
}
调用C窗口中文本框的值» 调用C窗口的函数»
在C窗口中调用调用页面中的值或函数
J('#btn11').dialog({ id:'test11', page:'content7.html', title:'B窗口' });
// 内容页content7.html中的代码：
var DG = frameElement.lhgDG, testDG;
function opchild()
{
testDG = new DG.curWin.J.dialog({
id: 'child1',
page: 'content8.html'
});
testDG.ShowDialog();
}
// 内容页content8.html中的代码：
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
alert( J('#txt4',DG.curDoc).val() );
});
J('#btn2').bind( 'click', function(){
DG.curWin.AA();
});
});
在2个窗口中相互调用函数和传值(3.4.1版本新增)
// A窗口的代码
J('#btn12').dialog({ id:'test12', page:'content9.html', title:'A窗口' });
// A窗口中内容页content9.html中的代码
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
// test13是B窗口的id
if( DG.iDG('test13') )
alert( DG.iDoc('test13').getElementById('inpB').value );
// 也可以使用jQ方式来写
// alert( J('#inpB',DG.iDoc('test13')).val() );
else
alert( '请先打开B窗口' );
});
J('#btn2').bind( 'click', function(){
if( DG.iDG('test13') )
DG.iWin('test13').fnB();
else
alert( '请先打开B窗口' );
});
J('#btn3').bind( 'click', function(){
if( DG.iDG('test13') )
DG.iWin('test13').DG.cancel();
else
alert( '请先打开B窗口' );
});
});
function fnA()
{
alert( '我是A窗口的函数' );
}
// B窗口的代码
J('#btn13').dialog({ id:'test13', page:'content10.html', title:'B窗口' });
// B窗口中内容页content10.html中的代码
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
// test12是A窗口的id
if( DG.iDG('test12') )
alert( DG.iDoc('test12').getElementById('inpA').value );
// 也可以使用jQ方式来写
// alert( J('#inpA',DG.iDoc('test12')).val() );
else
alert( '请先打开A窗口' );
});
J('#btn2').bind( 'click', function(){
if( DG.iDG('test12') )
DG.iWin('test12').fnA();
else
alert( '请先打开A窗口' );
});
J('#btn3').bind( 'click', function(){
if( DG.iDG('test12') )
DG.iWin('test12').DG.cancel();
else
alert( '请先打开A窗口' );
});
});
function fnB()
{
alert( '我是B窗口的函数' );
}
窗口A» 窗口B»
在父窗口和子窗口之间相互调用函数和传值(3.4.1版本新增)
// 父窗口的代码
J('#btn14').dialog({ id:'test14', page:'content11.html', title:'父窗口', cover:true });
// 父窗口中内容页content11.html中的代码
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
// child是子窗口的id
if( DG.iDG('child') )
alert( DG.iDoc('child').getElementById('inpB').value );
// 也可以使用jQ方式来写
// alert( J('#inpB',DG.iDoc('child')).val() );
else
alert( '请先打开子窗口' );
});
J('#btn2').bind( 'click', function(){
if( DG.iDG('child') )
DG.iWin('child').fnB();
else
alert( '请先打开子窗口' );
});
});
function fnA()
{
alert( '我是父窗口的函数' );
}
// 打开子窗口的代码
function opchild()
{
var childDG = new DG.curWin.J.dialog({ id:'child', title:'子窗口', page:'content12.html', parent:DG });
childDG.ShowDialog();
}
// 子窗口中内容页content12.html中的代码
var DG = frameElement.lhgDG;
J(function(){
J('#btn1').bind( 'click', function(){
// test14是父窗口的id
if( DG.iDG('test14') )
alert( DG.iDoc('test14').getElementById('inpA').value );
// 也可以使用jQ方式来写
// alert( J('#inpA',DG.iDoc('test14')).val() );
else
alert( '请先打开父窗口' );
});
J('#btn2').bind( 'click', function(){
if( DG.iDG('test14') )
DG.iWin('test14').fnA();
else
alert( '请先打开父窗口' );
});
});
function fnB()
{
alert( '我是子窗口的函数' );
}
这是框架页面中的topFrame页面
这是在框架最顶层页面弹出的窗口
J('#btn1').dialog({ id:'test1', html:'我是在框架的最顶层页面弹出的窗口', rang: true });
这是框架页面中的bottomFrame页面
这是在窗口调用页面弹出的窗口，使用了t=self参数
// 此页面加载lhgdialog.min.js文件代码为：
<script type="text/javascript" src="lhgdialog.min.js?t=self"></script>
J('#btn2').dialog({ id:'test2', html:'我是在窗口调用页面弹出的窗口', rang: true });
注意：不要在框架的不同框架页面同时弹出窗口，因为这样是在不同调用页面弹出的窗口，虽然窗口都创建在同一页面，但因为是不同的调用页面，所以也会出现窗口的层叠次序混乱，所以记住在框架中只能在其中的一个框架页面调用窗口。本页面只是作为示例用，实际中不要如此使用。
主页面
var dg = new J.dialog({
id:'A窗口id',
title:'A窗口',
page:'A页面路径'});
dg.ShowDialog();
function a()
{
alert( '主页面方法' );
}
----------------------------------------------
A页面
var DG = frameElement.lhgDG;
var child_dg = new DG.curWin.J.dialog({
id:'B窗口id',
title:'B窗口',
page:'B页面路径',
parent:DG });
child_dg.ShowDialog();
function b()
{
alert( 'A页面方法' );
}
----------------------------------------------
B页面
var DG = frameElement.lhgDG;
DG.iWin('A窗口id').b();
DG.curWin.a();
发表评论
相关推荐
版本（2011-07-04 发布）： V3.5.2 窗口lhgdialog.min.js文件的url参数(3.4.0新增) 参数形式为：[removed][removed] t：指定弹出窗口的页面(替代原来的第22个参数SetTopWindow)参数值：self，在当前页面弹出窗口...
lhgDialog api demo 示例
《Lhgdialog对话框使用总结（上）》 在网页开发中，对话框是一个不可或缺的交互元素，它用于向用户展示重要信息或者进行确认操作。Lhgdialog是一款基于JavaScript的弹出对话框插件，其设计简洁，功能强大，且高度可...
`lhgdialog`是一个优秀的JavaScript库，专门用于创建模态对话框，它提供了丰富的自定义选项和美观的视觉效果，相比C#自带的对话框，`lhgdialog`在用户体验和设计感上更为出色。 `lhgdialog`的核心功能包括： 1. **...
《lhgdialog v3.5.3：一款高效弹出窗组件详解》 在Web开发领域，用户界面的交互设计是提升用户体验的关键因素之一。其中，弹出窗口作为常见的交互元素，广泛应用于提示、确认、警告等场景。lhgdialog v3.5.3就是...
`lhgdialog`是一个流行的JavaScript插件，用于创建各种类型的对话框，如警告、确认、提示以及自定义模态窗口，以提高用户体验。这个插件尤其适用于那些希望在不离开当前页面的情况下收集用户信息或进行操作确认的...
下面我们将深入探讨lhgDialog的核心特性、使用方法以及如何通过提供的帮助文档和示例（demo）进行学习。 首先，lhgDialog的基本功能是显示各种类型的弹窗，如警告、确认、提示和自定义内容。这些弹窗可以根据项目...
您可以对 lhgDialog 进行修改和美化，可以去除 lhgDialog 版权注释或改变程序名称，无需公开您修改或美化过的 lhgDialog 程序与界面。 商业授权每个公司只需要购买一次，而不限制产品域名。适用于 lhgDialog 现有...
6. **_demo.html**：组件的演示文件，用于展示如何使用lhgdialog。 **安装步骤：** 1. 将整个lhgdialog组件放置在项目的一个目录中，保持文件结构完整。例如，在CMS系统中，可以放在`ACT_inc/js/lhgdialog/`下。 2....
lhgdialog是一款由李辉刚开发的弹出窗口控件，用于在网页中创建具有定制化功能的对话框。该控件提供了丰富的配置选项和多种内容展现方式，适合于多种场景下的网页交互设计。 首先，了解lhgdialog的文件结构至关重要...
总结来说，lhgdialog3.2.4凭借其强大的API接口和优秀的跨框架兼容性，成为了开发者构建高质量对话框的首选工具。无论是在小型项目还是大型复杂系统中，它都能提供一致且高效的对话框解决方案，让开发工作变得更加...
http://www.px915.com/lhgdialog/_demo.html 1、改变了弹窗的样式（自认为喜欢比较轻盈的，原来仿QQ的样式比较美观，不过容易跟QQ消息混淆^_^） 2、如果弹窗标题设置为空，则自动提取弹窗内容页的title并截取字符为...
总结来说，lhgDialog结合跨iframe框架使用，需要理解JavaScript的跨域通信机制，利用`window.postMessage`来传递对话框的配置信息，然后在子页面中监听并处理这些信息，从而实现在iframe内打开lhgDialog的功能。...
总结，lhgDialog-4.2.0是一个强大且灵活的对话框插件，它的出现极大地简化了Web开发者创建对话框的操作，提高了用户体验。无论是简单的提示，还是复杂的交互，lhgDialog都能游刃有余地处理，是构建现代Web应用不可或...
《lhgdialog弹出窗口应用详解》 lhgdialog是一款广泛应用于前端开发中的轻量级对话框插件，尤其在JavaScript和HTML5项目中，它以其简洁的API和丰富的自定义选项，为开发者提供了强大的弹出窗口解决方案。本文将深入...
**lhgdialog弹出窗口框架使用说明** lhgdialog是一个专为前端开发者设计的轻量级、高效能的弹出窗口组件。它以其强大的功能和灵活性，在网页应用中被广泛使用，尤其适用于需要创建各种复杂对话框场景。本文将详细...
5. **示例代码**："demo"标签表明该压缩包可能包含了演示程序，这些示例代码可以帮助开发者快速理解和学习如何使用lhgdialog4.0.0 API。通过分析和运行这些示例，开发者可以直观地看到API的实际应用。 6. **文档和...
**lhgdialog 说明文档** lhgdialog 是一个专门用于创建图形用户界面（GUI）对话框的工具，尤其适用于快速开发简单的应用程序或脚本。它提供了丰富的功能，可以帮助开发者轻松地构建各种类型的对话框，包括消息提示...
在IT行业中，脚本语言是实现自动化任务和交互式用户界面的重要工具，而"lhgdialog"是一个专门用于创建弹出窗口的JavaScript库。在这个"lhgdialog_脚本实例_"中，我们将会探讨如何利用这个库来创建具有各种功能和样式...
"lhgdialog 最新"指的是lhgdialog库的最新版本，这是一个专用于创建弹出窗口的JavaScript库。lhgdialog库的设计目标是提供一个轻量级、高效且易于使用的解决方案，帮助开发者在网页中实现各种复杂的对话框功能，如...