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

Question

我正在尝试在初始化后更改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');
  }
}

}）;

}）;

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

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

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

以下是对话框的html：

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

Answer 1

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

Answer 2

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

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

Answer 3

试试这个：

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

Answer 4

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

Answer 5

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

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

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

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

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

来源：http://api.jqueryui.com/dialog/

Answer 6

这对我有用。关键是要在>打开它之后调整的大小：

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

我的案例中的jQuery版本是1.11：

> Query.fn.jquery
> "1.11.1"

Answer 7

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