jQuery UI Dialog 参数使用

欢迎加入QQ群技术交流：466355109，技术不全没关系，只要有交流的心就尽管来吧!!!

jQuery UI Dialog常用的参数有：

1. autoOpen：默认true，即dialog方法创建就显示对话框
2. buttons：默认无，用于设置显示的按钮，可以是JSON和Array形式:
   1. {"确定":function(){},"取消":function(){}}
   2. [{text:"确定", click: function(){}},{text:"取消",click:function(){}}]
3. modal：默认false，是否模态对话框，如果设置为true则会创建一个遮罩层把页面其他元素遮住
4. title：标题
5. draggable：是否可手动，默认true
6. resizable：是否可调整大小，默认true
7. width：宽度，默认300
8. height：高度，默认"auto"

其他一些不太常用的参数：

1. closeOnEscape：默认true，按esc键关闭对话框
2. show：打开对话框的动画效果
3. hide：关闭对话框的动画效果
4. position：对话框显示的位置，默认"center"，可以设置成字符串或数组：
   1. 'center', 'left', 'right', 'top', 'bottom'  如果要组合，一定要按顺序写，比如要右下角，要写：['right','bottom']
   2. ['right','top']，通过上面的几个字符串组合(x,y)
   3. [350,100]，绝对的数值(x,y)
5. minWidth：默认150，最小宽度
6. minHeight：默认150，最小高度

[javascript]  view plain copy print ?

1. <script language="javascript">  
2.     $(document).ready(function() {  
3.       
4.         //$("#dialog").dialog({ modal: true },{title:"ssss"});  
5.         //$("#dialog").dialog({ show: { effect: 'drop', direction: "up" } });  
6.         $("#dialog").dialog(  
7.             {modal:true},  
8.             {title:"登录提示"},  
9.             {show:{effect:'drop', direction:'up'}},  
10.             {hide:{effect:'drop', direction:'down'}},  
11.             {position:['right','bottom']},  
12.             {draggable:false},  
13.             {resizable:false}  
14.         );  
15.     });  
16.     </script>  

以下这种写法更规范！

[javascript]  view plain copy print ?

1. $(document).ready(function() {  
2.       
3.         //$("#dialog").dialog({ modal: true },{title:"ssss"});  
4.         //$("#dialog").dialog({ show: { effect: 'drop', direction: "up" } });  
5.         $("#dialog").dialog({  
6.             modal:true,  
7.             title:"登录提示",  
8.             show:{effect:'drop', direction:'up'},  
9.             hide:{effect:'drop', direction:'down'},  
10.             position:['right','bottom'],  
11.             draggable:false,  
12.             resizable:false  
13.         });  
14.         $("#dialog").css({color:"red","font-size":"12px"});  
15.     });  
16.     </script>