弹出窗口的各种在线演示示例

参考网址：点击打开链接

jQuery方式和普通函数式

1. jQuery方式调用

   J(function(){ 
   J('#btn1').dialog({ id:'test1', html:'<h3>我是jQuery方式调用的窗口</h3>' }); 
   });

   运行»

2. 普通函数方式调用

   function opdg( id ){ 
   var dg = new J.dialog({ id:id, html:'<h3>我是普通函数方式调用的窗口</h3>' }); 
   dg.ShowDialog(); 
   }

   运行»

常规配置参数使用演示

1. 开启遮罩层，锁定屏幕，并消除浏览器右边滚动条(3.5.2新增)

   J('#btn14').dialog({ id:'test14', cover:true, html:'我不能对页面进行操作了', lockScroll:true });

   运行»

2. 使用chrome皮肤的窗口(3.5.0新增)

   J('#btn41').dialog({ id:'test41', skin:'chrome', html:'我是使用了chrome皮肤的窗口' });

   运行»

3. 重新设定取消按钮的文本，并改变取消按钮关闭窗口的默认动作(3.4.2新增)

   J('#btn37').dialog({ id:'test37', skin:'aero', cancelBtnTxt:'确定', onCancel:function(){alert('我成了确定按钮了');}, html:'我改变了取消按钮' });

   运行»

4. 浏览器大小改变后窗口位置也改变(3.4.2新增)

   J('#btn38').dialog({ id:'test38', autoPos:{left:'center',top:'center'}, html:'我的位置随着浏览器的大小的改变而改变' });

   运行»

5. 设置遮罩层颜色为黑色，透明度为0.4(3.4.1新增)

   J('#btn34').dialog({ id:'test34', cover:true, bgcolor:'#000', opacity:0.2, html:'遮罩层的颜色被我设成黑的了' });

   运行»

6. 双击标题栏可最大化还原窗口(3.4.1新增)

   J('#btn35').dialog({ id:'test35', html:'我可以通过双击标题栏最大化和还原窗口了' });

   运行»

7. 通过按钮实现窗口最大化还原(3.4.1新增)

   J('#btn36').dialog({ id:'test36', html:'我是通过按钮来实现的最大化和还原' });

   运行»  最大化»

8. 不显示最大化按钮示例(3.4.0新增)

   J('#btn28').dialog({ id:'test28', maxBtn:false, title:'不显示最大化按钮', html:'我不显示最大化的按钮了' });

   运行»

9. 显示最小化按钮示例(3.4.0新增)

   J('#btn29').dialog({ id:'test29', minBtn:true, title:'显示最小化按钮', html:'我显示最小化的按钮了' });

   运行»

10. 2秒钟后自动关闭窗口示例(3.4.0新增)

    J('#btn30').dialog({ id:'test30', timer:2, title:'2秒钟后自动关闭窗口', html:'我2秒钟后自动关闭了' });

    运行»

11. id为"test3"的窗口标题为"我更改了标题"示例

    J('#btn3').dialog({ id:'test3', title:'我更改了标题', html:'我的id是test3，我是标题是"我更改了标题"' });

    运行»

12. 设置窗口的大小

    J('#btn4').dialog({ id:'test4', width:300, height:200, html:'窗口的大小改为300X200' });

    运行»

13. 是否显示标题栏

    此示例请参照皮肤制作里的示例，因为注意如果不显示一定要选择相应的皮肤，无标题栏的皮肤，而且设为不显示后iconTitle,xButton参数都无效了。

    运行»

14. 不显示窗口左边小图标

    J('#btn5').dialog({ id:'test5', iconTitle:false, html:'我不显示窗口左边的小图标' });

    运行»

15. 不显示窗口右边的X关闭按钮

    J('#btn6').dialog({ id:'test6', xButton:false, html:'我不显示窗口右边的X关闭按钮' });

    运行»

16. 不显示窗口下方的按钮栏

    J('#btn7').dialog({ id:'test7', btnBar:false, html:'我不显示按钮栏' });

    运行»

17. 不显示窗口按钮栏上的取消按钮

    J('#btn8').dialog({ id:'test8', cancelBtn:false, html:'我不显示取消按钮' });

    运行»

18. 内容页参数为page且为content.html文件

    J('#btn9').dialog({ id:'test9', page:'content.html' });

    运行»

19. 内容页参数为page且内容为外部链接qq.com，此时注意link参数一定要设为true

    J('#btn10').dialog({ id:'test10', page:'http://www.qq.com', link:true, width:800, height:600, title:'QQ首页' });

    运行»

20. 内容页参数为html且html值为DOM对象

    J('#btn11').dialog({ id:'test11', html:J('#obj')[0] });

    运行»

21. 开启静止定位，并自定义窗口弹出的位置

    J('#btn12').dialog({ id:'test12', html:'我可以随屏滚动', fixed:true, left:100, top:100 });

    运行»

22. 开启静止定位，并将窗口定位在右下角

    J('#btn13').dialog({ id:'test13', html:'我可以做为右下角的消息窗口', fixed:true, left:'right', top:'bottom' });

    运行»

23. 不允许拖动和改变大小

    J('#btn15').dialog({ id:'test15', drag:false, resize:false, html:'我不能拖动和改变大小了' });

    运行»

24. 不请允许拖出浏览器可视域

    J('#btn16').dialog({ id:'test16', rang:true, html:'我不能拖出浏览器了' });

    运行»

25. 改变加载窗口时的提示文本

    J('#btn17').dialog({ id:'test17', loadingText:'我是窗口加载时的提示文本，哈哈...', html:'' });

    运行»

26. 自适窗口内容的大小

    J('#btn18').dialog({ id:'test18', width:300, height:200, autoSize:true, page:'content1.html' });

    运行»

27. 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个，它们层叠的次序就乱了。

    运行»

28. 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' ); 
    } 
    }); 
    }

    运行»   运行»

29. onXclick参数示例

    J('#btn22').dialog({ id:'test22', onXclick:function(){alert('我改变了关闭按钮的事件，我不能关闭窗口了');}, html:'X关闭按钮的事件被改变了' });

    运行»

30. onCancel参数示例

    J('#btn23').dialog({ id:'test23', onCancel:function(){alert('我是在窗口关闭前执行的函数');}, html:'关闭窗口前执行onCancel函数' });

    运行»

其它演示示例

1. 使用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('我是窗口关闭后执行的函数'); });

   运行»

2. 使用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. 在内容页中重新指定窗口标题(3.4.0新增)

   J('#btn31').dialog({ id:'test31', page:'content6.html' }); 
    
   //content6.html页面里的代码为： 
   var DG = frameElement.lhgDG; 
   function ok() 
   { 
   DG.SetTitle( '我是被按钮改变了的标题' ); 
   }

   运行»

4. 在内容页中重新指定X按钮绑定的函数(3.4.0新增)

   J('#btn32').dialog({ id:'test32', page:'content7.html' }); 
    
   //content7.html页面里的代码为： 
   var DG = frameElement.lhgDG; 
   DG.SetXbtn( ok ); 
   function ok() 
   { 
   alert( '我又不能关闭窗口了' ); 
   }

   运行»

5. 在内容页中使用closeTime函数来定时关闭窗口(3.4.0新增)

   J('#btn33').dialog({ id:'test33', page:'content8.html' }); 
    
   //content8.html页面里的代码为： 
   var DG = frameElement.lhgDG; 
   DG.closeTime( 2 );

   运行»

6. 在调用页面关闭窗口

   // 这里请注意DG得定义成全局变量 
   testDG3 = J('#btn24').dialog({ id:'test24', html:'我只能被调用页面上的按钮关闭', xButton:false, btnBar:false }); 
   //关闭窗口按钮的单击事件 
   onclick="testDG3.cancel();"

   运行»   关闭窗口»

7. 关闭窗口刷新父页面

   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关闭函数

   运行»

8. 父窗口中打开子窗口

   请参阅 常规配置参数使用演示 里的 parent参数示例并且父子窗口都加了遮罩层 示例

   运行»

9. 重新指定窗口的大小并将窗口定位在屏幕的中间(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 });

   运行»

10. 增加新的按钮和移除按钮

    J('#btn27').dialog({ id:'test27', page:'content5.html' });