Question

我正在开发一个简单的tic-tac-toe应用程序并在CodePen中构建它。当用户丢失或强制绘制（设计为无与伦比）时，会弹出一个jquery UI对话框，通知用户所述结果。我遇到的问题是，当发生这种情况时，会出现一个大的空白区域，导致页面右侧出现滚动条。这是一个小细节 - 但我想解决。我无法将overflow: hidden放在正文上，因为用户将无法在小屏幕或调整大小的浏览器窗口中滚动。我已经尝试过以下无效：

将对话框的位置调整到屏幕顶部
将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位置设置为绝对值，并解决问题：

.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对话框 - 对话框下方不需要的空格

1 个答案: