宽度和高度通过样式属性在小部件上设置。例如：
<div style="position: absolute; height: auto; width: 404px; top: 50px; left: 45.8px; z-index: 101;" tabindex="-1" role="dialog" class="ui-dialog ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="filters-dialog" aria-labelledby="ui-id-1">
此处设置宽度，高度为auto。然后计算内容的高度，而不是整个对话框 div：
<div id="filters-dialog" style="width: auto; min-height: 0px; max-height: none; height: 201.6px;" class="ui-dialog-content ui-widget-content">
这一切都设置为包装的一部分，可以通过widget 选项访问。要调整这一点，您不能使用 CSS，因为元素上的样式属性将受到控制。 （可以尝试将"" 设置为值，但我认为它不会将其全部丢弃。）
调整宽度应该非常直接。调整高度，没那么多。高度不仅仅是100% - 100px，它是(100% - 100px) - .ui-dialog-content padding - .ui-dialog-titlebar height (with padding) - .ui-dialog padding。不是不可能，只是复杂。
在这一点上，就个人而言，我会使用窗口的高度和宽度并完成它。您预计用户多久调整一次窗口大小？
那么如何前进。可以试试这样的：
open: function() {
$(this).dialog("widget").css("width", "calc(100% - 100px)");
$(this).dialog("widget").find(".ui-dialog-content").css("height", "calc(100% - 100px)");
}
它并不漂亮，但它可以满足需要。工作：https://jsfiddle.net/Twisty/4cjm2ood/
我不知道这会产生预期的结果。 100% 高度将绑定到父级，因此计算出错误的高度。最好去掉样式，让 CSS 完成工作。
首先要记住的是，我们需要有选择地删除某些样式，而不是全部清除。
工作示例：https://jsfiddle.net/Twisty/4cjm2ood/2/
JavaScript
$(function() {
function removeStyleAttr(list, item) {
var parts = list.split(";");
parts = parts.slice(0, -1);
var styles = {},
newList = "";
$.each(parts, function(i, s) {
var k = s.split(":")[0].trim();
var v = s.split(":")[1].trim();
styles[k] = v;
});
if (typeof item != "string") {
$.each(item, function(k, v) {
delete styles[v];
});
} else {
delete styles[item];
}
$.each(styles, function(key, val) {
newList += key + ": " + val + "; "
});
return newList.slice(0, -1);
}
$("button").on("click", function() {
$("#filters-dialog").dialog("open");
});
$("#filters-dialog").dialog({
autoOpen: false,
classes: {
"ui-dialog": "ui-diag-top",
"ui-dialog-content": "ui-diag-content"
},
modal: true,
width: $(window).width() - 100,
height: $(window).height() - 100,
open: function() {
var s1 = $(this).dialog("widget").attr("style");
var s2 = removeStyleAttr(s1, ["width", "height"]);
var s3 = $(this).dialog("widget").find(".ui-dialog-content").attr("style");
var s4 = removeStyleAttr(s3, "height");
$(this).dialog("widget").attr("style", s2);
$(this).dialog("widget").find(".ui-dialog-content").attr("style", s4);
}
});
});
首先是一个小函数：removeStyleAttr(List, Item)
- List (String) - 分配给一个元素的所有 CSS 样式的列表
- Item (String, Array) - 我们要移除的特定样式
- 返回值是所有剩余 CSS 样式的新字符串。
所以现在我们有一种方法可以从元素中切出一个特定的样式，例如“宽度”。一旦这些被删除，我们就可以使用我们自己的 CSS。为此，我建议使用classes 添加您自己的类名。
使用open 回调，我们剥离了包装器的width 和height，以及内容的height。这会将控件返回给我们的 CSS。
CSS
.ui-diag-top {
width: calc(100% - 100px);
height: calc(100% - 100px);
}
.ui-diag-content {
height: auto;
}
包装器大小合适，工具栏保持不变，内容将是auto 以填充其余部分。
现在，如果您认为必须经常这样做，您可以考虑使用 Widget Factory 并构建一个超级对话框，允许您接受 String 值而不是 Integer 作为宽度和高度。
更新 1
width 选项将毫无问题地接受 calc(100% - 100px)。 height 被操作并需要一些覆盖。
更新 2
虽然 width 和 height 存储为值 calc(100% - 100px)，但有一些调整大小函数可以与这些值进行比较：
https://github.com/jquery/jquery-ui/blob/master/ui/widgets/dialog.js
第 788 行：if ( options.minWidth > options.width ) {
第 789 行： options.width = options.minWidth;
第 790 行：}
即使你认为你可以，你也冒着破坏某些东西的风险。我只想创建一个可以在调整width 和height 的调整大小事件期间调用的函数。
更新 3
这是一个更简洁的解决方案，它允许调整大小并且不依赖 CSS。
工作示例：https://jsfiddle.net/Twisty/4cjm2ood/6/
JavaScript
$(function() {
$.widget("custom.superDialog", $.ui.dialog, {
options: {
useWindowOffset: false,
windowOffset: 0
},
open: function(event, ui) {
if (this.options.useWindowOffset) {
this.applyWindowOffset();
}
this._super(event);
},
_resetWidth: function(ow, dw) {
var nw = $(ow).width() - dw;
this._setOption("width", nw);
},
_resetHeight: function(ow, dh) {
var nh = $(ow).height() - dh;
this._setOption("height", nh);
},
applyWindowOffset: function() {
var o = this.options.windowOffset;
if (typeof o == "object" && o.length > 1) {
this._resetWidth(this.window, o[0]);
this._resetHeight(this.window, o[1]);
}
if (typeof o == "number") {
this._resetWidth(this.window, o);
this._resetHeight(this.window, o);
}
console.log(this.options);
},
resizeWindowOffset: function(event) {
this.applyWindowOffset();
this._size();
}
});
$("button").on("click", function() {
$("#filters-dialog").superDialog("open");
});
$("#filters-dialog").superDialog({
autoOpen: false,
modal: true,
title: "I am offset!",
useWindowOffset: true,
windowOffset: 100
});
$(window).resize(function(e) {
$("#filters-dialog").superDialog("resizeWindowOffset", e);
})
});
利用小部件工厂，我们可以创建自己的自定义对话框小部件。我们添加了一些选项和方法，以便我们可以使用基于窗口偏移量的大小。
-
useWindowOffset：布尔型，默认false
-
windowOffset：整数或数组，默认0。将 useWindowOffset 设置为 true 并设置以像素为单位的偏移值或以像素为单位的数组 ([width, height])。
-
applyWindowOffset()：这里不接受任何争论。将新的宽度和高度值应用于对话框。在open之前执行。
-
resizeWindowOffset()：接受event，但此时不使用它。在调整窗口大小以应用大小更改时调用。
没有更多关于此的更新。希望对您有所帮助。