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

【问题标题】：How to resize width of a Jquery dialog after initialization如何在初始化后调整 Jquery 对话框的宽度
【发布时间】：2009-05-18 12:51:11
【问题描述】：

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

【问题讨论】：

这些都没有你的答案？ stackoverflow.com/search?q=resize+jquery+dialog
不，我以前经历过这些
只是你使用的是“#dialogBox”而不是“#dialogContainer”吗？

标签： jquery jquery-ui

【解决方案1】：

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

【讨论】：

如果您能告诉我们在哪里可以找到这些文件，将会很有用。我没有将它们作为 jQuery 1.12 的一部分
@DAB：这些是 jquery-ui 的一部分
如果它已经是 jQuery UI 的一部分，他们不会已经包含了吗？这是如何解决问题的？

【解决方案2】：

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

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

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

在我的例子中，jQuery 版本是 1.11：

> Query.fn.jquery
> "1.11.1"

【讨论】：

【解决方案7】：

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

【讨论】：

该问题已有有效答案，与 jQuery UI Dialog 的宽度参数使用不当无关。