Question

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

我像这样初始化微调器：

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'}
  }
);

Mootools旋转器中心屏幕

1 个答案: