Jquery对话框大小设置方法

本文提供两种更改jquery对话框的大小的方法。

1.通过改变对话框css属性,来改变对话框的大小

这种方法需要在对话框显示后进行设置,示例代码如下:

$("#selector").dialog("open");
$("#selector ").parent().css("width","350");
$("#selector ").parent().css("height","250");

2.通过dialog属性进行设置,示例代码如下:

$("#selector").dialog({
    autoOpen: false,
    modal: true,
    width: "450", 
    height: "250"
});
$("#selector").dialog("open");

$("#selector").dialog("open");
$("#selector").dialog("option", "width", "500");
$("#selector").dialog("option", "height", "400");

附录:jquery对话框属性大全

名称 类型 说明
autoOpen 属性 为true的时候dialog被调用的时候自动打开dialog窗口,为false的时候,一开始隐藏窗口,直到调用dialog("open")的时候才弹出dialog窗口。默认为true
bgiframe 属性 默认为false
buttons 属性 显示按钮数组,包含按钮的文本,和按钮点击函数。
示例:
$('.selector').dialog({buttons:[{text:"Ok", onclick:function() { $(this).dialog("close"); } ]});
closeOnEscape 属性 为true的时候,点击键盘ESC键关闭dialog,默认为true
dialogClass 属性 对话框类型,将被添加到dialog,默认为空
draggable 属性 是否可以使用标题头进行拖动,默认为true
resizable 属性 是否可以改变dialog的大小,默认为true
width 属性 dialog的宽,默认为auto
height 属性 dialog的高,默认为auto
maxWidth 属性 dialog可改变的最大宽度,默认为false,为不限
minWidth 属性 dialog可改变的最小宽度,默认为150
maxHeight 属性 dialog可改变的最大高度,默认为false,为不限
minHeight 属性 dialog可改变的最小高度,默认为150
hide 属性 当dialog关闭时候的效果。默认为null,无效果
show 属性 当dialog打开时候的效果。默认为null,无效果
modal 属性 是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口。默认为false不是模式窗口。
title 属性 dialog的标题文字,默认为空。
position 属性 显示位置:可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量,也可以是一个字符串数组例如['right','top']
zIndex 属性 dialog的zindex值,默认值为1000
stack 属性 默认值为true,当dialog获得焦点时,dialog将在最上面。
beforeclose 事件 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止。
示例:
$('.selector').dialog({ beforeclose: function(event, ui) { ... }});
close 事件 当dialog被关闭后触发此事件
open 事件 当dialog打开时触发。
focus 事件 当dialog获得焦点时触发。
dragStart 事件 当dialog拖动开始时触发。
drag 事件 当dialog被拖动时触发。
dragStop 事件 当dialog拖动完成时触发。
resizeStart 事件 当dialog开始改变窗体大小时触发。
resize 事件 当dialog被改变大小时触发。
resizeStop 事件 当改变完大小时触发。
destroy 方法 dialog销毁, 例:.dialog( 'destroy' )
disable 方法 dialog不可用,例:.dialog('disable')
enable 方法 dialog可用
close 方法 关闭dialog
open 方法 打开dialog
option 方法 设置和获取dialog属性,例如:.dialog( 'option' , optionName , [value]) ,如果没有value,将是获取。
isOpen 方法 如果dialog打开则返回true,例如:.dialog('isOpen')
moveToTop 方法 将dialog移到最上层,例如:.dialog( 'moveToTop' )
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容