JQuery UI 对话框 - 不需要的 space 对话框下方

Question

我正在开发一个简单的井字游戏应用程序并在 CodePen 中构建它。当用户输了或者强制平局（设计为不可战胜）时，会弹出一个jquery UI对话框通知用户该结果。我遇到的问题是，发生这种情况时，会出现一个大的空白 space，导致页面右侧出现一个滚动条。这是一个小细节 - 但我想修复。我不能将 overflow: hidden 放在 body 上，因为这样用户将无法在小屏幕或调整大小的浏览器中滚动 windows。我已经尝试了以下无济于事：

将对话框的位置调整到屏幕的最顶部
将 overflow: hidden 规则放在 .ui-dialog
调整对话框的高度
调整 margin-bottom 的 .ui-dialog
混淆其他对话框选项以查看它们是否是原因

其中一些看起来很牵强，但我想在来这里之前尝试我能想到的一切。研究也没有任何结果。我是运行 Chrome，有问题的笔可以在这里找到：http://codepen.io/no_stack_dub_sack/pen/YGNRxO.

如有任何帮助，我们将不胜感激！提前致谢。

同样，这是一个小细节，但由于该应用程序可以在一个页面上显示所有内容而无需在大多数屏幕上滚动，因此我希望它看起来尽可能干净。

代码如下：

// DIALOG BOXES

      $('body').append('<div id="draw" class="gameOver"><p>It\'s a Draw!</p></div>');
      $('body').append('<div id="loser" class="gameOver"><p>You Lose!</p></div>');
      $('.gameOver').dialog({
        autoOpen: false,
        resizable: false,
        height: 120,
        dialogClass: 'no-close',
        buttons: {
          'Play Again?': function() {
            $('.gameOver').dialog('close');
            setNewGame();
          }
        }
      });

Answer 1

在对话框创建过程中的某个地方，位置设置为相对于您的对话框，这导致您的游戏高度计算对话框，从而给出空隙。你可以简单地在css中设置ui-dialog position为absolute，它会解决问题：

.ui-dialog {
  position: absolute;
  box-shadow: 1px 1px 30px 5px;
  background: #04A777;
  border-radius: 10px;
  outline: none;
  overflow: hidden;
  margin-top: none;
}

http://codepen.io/anon/pen/EgmoGZ

JQuery UI 对话框 - 不需要的 space 对话框下方

JQuery UI Dialog - unwanted space below dialog box

jquery-ui

jquery-ui-dialog