jquery ui 弹窗效果

  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>  
posted @ 2015-02-07 16:20  沐雨清风  阅读(1475)  评论(0)  编辑  收藏  举报