如何确保jQueryUI-Dialog＆＃34; X＆＃34; -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");
});

希望这有帮助！