如何确保 jQuery UI-Dialog“X”-Button 留在屏幕上？

Question

请考虑以下 CodePen：https://codepen.io/ChrisVomRhein/pen/yzBwaZ

当您单击按钮时，会打开一个包含大量文本的对话框并

$( "#dialog" ).dialog("option", "position", { 
    my: "right top", 
    at: "right top", 
    of: $(this) 
});

确保它相对于按钮定位。对于顶部的三个按钮，这很好用。 jQuery 确保对话框停留在屏幕上。

即使对于左上角的按钮，jQuery 也足够聪明，可以移动对话框以使其停留在屏幕上。

但是，只要我单击位于底部的按钮之一，jQuery 也会移动对话框；这次向上。问题是 X 按钮（关闭对话框）不再可用。此外，没有显示滚动条！

有没有办法强制 jQuery UI 确保 X 总是在浏览器窗口的可访问区域内？还是我在这里遗漏了一些非常基本的东西？

Answer 1

要确保对话框小于窗口，您可以通过使用 jquery 检索它并像这样作为参数传递来设置它的高度：

$( "#dialog" ).dialog({ autoOpen: false, height: $(window).height()* 0.9 });

在这种情况下，检索的高度来自窗口，但您可以搜索容器元素或您希望对话框适合的任何其他内容。 高度乘以 0.9 使其比页面小一点。

使用css属性overflow:auto可以让文本大于对话框时出现滚动条，

看看这个codepen

编辑

我明白问题所在，所以我更改了代码：codepen
使用此解决方案，我将对话框大小设置为可能的最大尺寸，检查顶部和底部空间之间的最大值：

$(".opener").click(function() {
  //get the button position
  var pos = $(this).position();
  //max between top and bottom
  var h = Math.max($(window).height()* 0.9 - pos.top, pos.top * 0.9  );
  $( "#dialog" ).dialog({
      position: { 
          my: "right top", 
          at: "left bottom", 
          of: $(this) 
       },
       autoOpen: false, 
       height: h
  });
  $( "#dialog" ).dialog("open");
});

希望这会有所帮助！