javascript - Mootools 微调中心屏幕

Question

我在我的网站上放了一个 mootools Spinner(来自 More 库)。微调器位于我的网页正文中，并在用户进行搜索(使用 ajax)时出现。微调器图形出现在 body 元素的中心 - 因此，在页面的中间。如果页面长于一个屏幕，这看起来不太好。

我像这样初始化微调器:

loadingSpinner = new Spinner(document.body,{message:"Fetching results..."});

现在，我只使用默认的 CSS，如下所示:

.spinner {
    position: absolute;
    opacity: 0.9;
    filter: alpha(opacity=90);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    z-index: 999;
    background: #fff;
}
.spinner-msg {
    text-align: center;
    font-weight: bold;
}

.spinner-img {
    background: url(img/spinner.gif) no-repeat;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

.spinner-msg 和 spinner-img(我想居中)都位于 .spinner-content 中，所以我尝试了在此 css 中执行此操作:

.spinner-content {
    position:fixed;
    top:50%;
    left:50%;
}

但它什么也没做。我确认 .spinner-content 元素正确接收了该 css，因此我假设微调器在内部使用一些 javascript 来定位微调器。

如何让微调器出现在屏幕中央？

Answer 1

试试这个:

loadingSpinner = new Spinner(
  document.body,
  {message:"Fetching results...",
   containerPosition: {relativeTo: document.body, position: 'center'}
  }
);