jquery - 使用 calc() 作为 jQuery-ui 对话框的高度来根据窗口高度设置它

Question

我试图让 jQueryUI 对话框成为 window 的高度和宽度(减去一些填充)。理想情况下，我会将这些选项设置为类似于 calc(100% - 100px) 的 CSS 值 ，而不是获取 $(window).height() 然后如果用户调整窗口大小，则必须处理更新内容。

这适用于 width 但不适用于 height。

这是我的 HTML:

<button>Open Dialog</button>
<div id="filters-dialog" style="display: none;">
  asdf<br/>
  asdf<br/>
  asdf<br/>
  asdf<br/>
</div>

还有我的 jQuery:

$("button").on("click", function(){
  $("#filters-dialog").dialog().dialog("open");
})
$("#filters-dialog").dialog({
  autoOpen: false,
  modal: true,
  width: "calc(100% - 100px)",
  height: "calc(100% - 100px)",
});

我试图让这个工作的一些事情包括设置 minHeight 选项，将 height 和 minHeight 设置为 上的对话框选项>open: 或 create:，尝试覆盖 .ui-dialog 的 height 或 min- height 或 top upon open: 或 create: (以这种方式设置 CSS 似乎适用于某些属性，但不适用于这些属性)，将 body 和 html 的 CSS 设置为 height: 100%，并抛出 !important。

这是 a fiddle 我的尝试被注释掉了。在此先感谢您的帮助。

Answer 1

jQuery UI 的 Dialog 小部件只接受高度作为 Number 或 “auto”，传递给它 “calc(100% - 100px)”只会将其默认为 "auto"。它的最小/最大高度仅为数字。对话框打开后，您必须以编程方式执行此操作。请记住，当您调用 .dialog() 属性时，您选择的是对话框内的内容，而不是对话框的包装 div，因此要设置窗口的实际高度，您'需要选择 .dialog() 的父级:

$("button").on("click", function(){
  $("#filters-dialog").dialog().dialog("open");
});

$("#filters-dialog").dialog({
  autoOpen: false,
  modal: true,
  width: "calc(100% - 100px)",
  open: function() {
    $(this).parent().css("height", "calc(100% - 100px)");
  }
});

请记住，如果您这样做，内容部分将不会按原样正确调整大小，因此如果您的内容大于窗口，它看起来会很奇怪。