初始化后如何调整Jquery对话框的宽度

I'm trying to change the width of a JQuery dialog after it has been initialized. Here is my initialization:

我正在尝试在初始化后更改JQuery对话框的宽度。这是我的初始化：

$(function() {
$("#dialogContainer").dialog({
title: 'Some title',
resizable: false,
bgiframe: true,
overlay: { opacity: 0.3, background: "white" },
position: [200, 200],
autoOpen: false,
height: 150,
width: 'auto'
modal: true,
buttons: {
  'ok': function() {
    $(this).dialog('close');
  }
}

});

}）;

});

}）;

And this is what I am doing to change the width of it in some other function:

这就是我正在做的改变其他功能的宽度：

$("#dialogBox").dialog('option','width',700);

But this doesn't work. The width of the dialog is the width of the paragraph that's first displayed in it. Was I suppose to do anything else?

但这不起作用。对话框的宽度是首次显示在其中的段落的宽度。我想做其他事吗？

Here is the html for the dialog:

这是对话框的html：

<div id = 'dialogContainer'>
  <p id = 'message'></p>
</div>

7 个解决方案

#1

Make sure that you are using ui.resizable.js and ui.resizable.css

确保您使用的是ui.resizable.js和ui.resizable.css

#2

Try this:

尝试这个：

$("#dialogID").data("width.dialog", 160);

#3

$("#dialogID").css("width", 160);

#4

HERE IS SHORT SOLUTION, But remember it is only for predefined dialog.

这里是短暂的解决方案，但请记住它仅适用于预定义的对话框。

$( "#dialog" ).dialog({minHeight: 300,minWidth:500});

#5

Initialize the dialog with the width option specified: The width of the dialog is in pixels.

使用指定的宽度选项初始化对话框：对话框的宽度以像素为单位。

$( "#dialogBox" ).dialog({ width: 500 });

Get or set the width option, after initialization:

初始化后获取或设置宽度选项：

// getter
var width = $( "#dialogBox" ).dialog( "option", "width" );

// setter
$( "#dialogBox" ).dialog( "option", "width", 500 );

Source: http://api.jqueryui.com/dialog/

资料来源：http：//api.jqueryui.com/dialog/

#6

This works for me. The point is to resize after open it:

这对我有用。重点是打开它后调整大小：

$('#dialogContainer').
    dialog('open').
    dialog('option', 'width',   'auto').
    dialog('option', 'height',  'auto');

jQuery version in my case is 1.11:

在我的情况下jQuery版本是1.11：

> Query.fn.jquery
> "1.11.1"

#7

-1

$("#dialogweb").dialog({width:'90%'});

#1