jQuery UI Dialog 参数使用-阿里云开发者社区

jQuery UI Dialog 参数使用

2015-11-23 2808

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

+关注继续查看

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

jQuery UI Dialog常用的参数有：

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

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

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

[javascript]view
 plaincopyprint?

<script language="javascript">  

    $(document).ready(function() {  

        //$("#dialog").dialog({ modal: true },{title:"ssss"});  

        //$("#dialog").dialog({ show: { effect: 'drop', direction: "up" } });  

        $("#dialog").dialog(  

            {modal:true},  

            {title:"登录提示"},  

            {show:{effect:'drop', direction:'up'}},  

            {hide:{effect:'drop', direction:'down'}},  

            {position:['right','bottom']},  

            {draggable:false},  

            {resizable:false}  

        );  

    });  

    </script>

以下这种写法更规范！

[javascript]view
 plaincopyprint?

$(document).ready(function() {  

        //$("#dialog").dialog({ modal: true },{title:"ssss"});  

        //$("#dialog").dialog({ show: { effect: 'drop', direction: "up" } });  

        $("#dialog").dialog({  

            modal:true,  

            title:"登录提示",  

            show:{effect:'drop', direction:'up'},  

            hide:{effect:'drop', direction:'down'},  

            position:['right','bottom'],  

            draggable:false,  

            resizable:false  

        });  

        $("#dialog").css({color:"red","font-size":"12px"});  

    });  

    </script>