码迷，mamicode.com
首页 > Web开发 > 详细

jquery ui 弹窗效果

时间：2015-02-07 17:25:04      阅读：167      评论：0      收藏：0      [点我收藏+]

标签：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>模拟dialog效果</title>  
  6. <!--引入jquery类库-->  
  7. <script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>  
  8. <script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>  
  9. <!--引入Css样式类库文件-->  
  10. <link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />  
  11. <script language="javascript" type="text/javascript">  
  12. $(function (){  
  13.       
  14.         $("#dialog").dialog({  
  15.                autoOpen:false,  //设置对话框打开的方式 不是自动打开  
  16.                show:"blind",    //打开时的动画效果  
  17.                hide:"explode",    //关闭是的动画效果  
  18.                modal:true,          //true代表运用遮罩效果  
  19. /*             buttons:{        //添加按钮的操作  
  20.                    "确定":function (){  
  21.                             $(this).dialog("close");//关闭对话框  
  22.                        },  
  23.                     "取消":function (){  
  24.                             $(this).dialog("close");  
  25.                         }  
  26.                      
  27.                    },  
  28.                    //上边是第一种方式  
  29.                      
  30.                    //下边是第二种方式  
  31.                    */  
  32.                 buttons:[  
  33.                     {  
  34.                         text:"Ok",  
  35.                         click:function (){  
  36.                             $(this).dialog("close");//关闭对话框  
  37.                         }  
  38.                     },  
  39.                         {  
  40.                         text:"取消",  
  41.                         click:function (){  
  42.                             $(this).dialog("close");//关闭对话框  
  43.                         }  
  44.                     }],  
  45.                 draggable:false,   //是否可以拖动的效果  true可以拖动  默认值是true    ，false代表不可以拖动  
  46.                 closeOnEscape:false,   //是否采用esc键退出对话框，如果为false则不采用 ，true则采用  
  47.                 title:"添加用户操作",    //对话框的标题  
  48.                 position:"top",         //对话框打开的位置，默认center，有top、left、right、center、bottom  
  49.                 width:600,      //设置对话框的宽度  
  50.                 height:300,     //设置对话框的高度  
  51.                 resizable:false,   //是否可以改变对话框的尺寸的操作，默认true           
  52.                 zIndex:1000,    //层叠效果  
  53.                 drag:function(event,ui){  
  54.                         //可以测试出 对话框当前的坐标位置  
  55.                           
  56.                     }  
  57.             });  
  58.           
  59.         //触发连接的事件   当你点击 连接  打开一个对话框  
  60.         $("#dialog_link").click(function (){  
  61.               
  62.             $("#dialog").dialog("open");  //open参数  作用  打开对话框  
  63.             });  
  64.           
  65.         //我怎么获取 我设置的options中的参数值  
  66.         var modalValue = $("#dialog").dialog("option","modal");  
  67.         alert(modalValue);  
  68.           
  69.         //我怎么设置options中的参数值  
  70.         $("#dialog").dialog("option","modal",false);  
  71.     });  
  72.   
  73.   
  74.   
  75. </script>  
  76. </head>  
  77.   
  78. <body>  
  79.     <h2>模拟dialog效果</h2>  
  80.     <!--创建一个连接-->  
  81.     <a href="javascript:void(0)" id="dialog_link"><span></span>open dialog</a>  
  82.       
  83.     <!--注册一个div  $("#dialog").dialog(); 它就成了一个对话框 在页面中就会隐藏-->  
  84.     <div id="dialog" title="hi!">  
  85.             hello world!  
  86.     </div>  
  87. </body>  
  88. </html>  

jquery ui 弹窗效果

标签：

原文地址：http://www.cnblogs.com/TwilightSnow/p/4278970.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！