jQuery .css() 不影响 div

Question

对于我正在开发的应用程序，我最近实现了一个吸收用户输入的覆盖层。当然，这只是我的目标之一 - 我还需要将位于此叠加层“内部”的弹出窗口居中。

这是我到目前为止的设置:

标记

<!-- snip extra HTML -->

<div id='some-overlay' class='input-eater hidden'>
  <div id='some-prompt' class='overlay dialogue'>
    This is a message that should be hidden.<br /><br />
    <a href='javascript: $('#some-overlay').fadeOut();'>Click Here To Close</a>
  </div>
</div>

<!-- ...SNIP... -->

...后台页面上的某些操作会导致#some-overlay 淡入，从而遮挡页面，直到发生关闭操作。这是有问题的 JavaScript:

<!-- ...Continued from the markup above... -->
<script>
var $button = $('.some-element'),
    $overlay = $('#some-overlay'),
    $prompt = $('#some-prompt');

$(document).ready(function () {
  $button.click(function(e) {
    e.preventDefault();

    var args = {
      // ...snip.  Unnecessary.
    };

    $.get('Home/SomeAction', args, function(result) {
      // Some processing...

      // !!!! This is the failing code... !!!!
      $prompt.css({
        'left': (window.width - $prompt.width()) / 2,
        'top': (window.height - $prompt.height()) / 2
      });
    });
  });
});
</script>

样式

.input-eater {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, 0.5);
}

.overlay {
  position: absolute;
  z-index: 1;
}

.dialogue {
  box-sizing: border-box;
  // Other platform-specific variants also included.
  // Cosmetic attributes such as box-shadow, background color, etc. also set.
}

如上面脚本部分所述，$.css() 调用无法重新定位叠加层内的提示。它应该垂直和水平居中，但仍位于页面的左上角。

问题:我做错了什么，导致叠加层无法居中？

Answer 1

没有window.width或height。幸运的是，您可以使用 $(window).width() 和 $(window).height() 代替。