Mootools 旋转中心屏幕

发布于 2024-12-01 23:29:33 字数 1035 浏览 0 评论 0原文

我在我的网站上放置了一个 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 来定位微调器。

如何让旋转器出现在屏幕中央？

原文

I have put a mootools Spinner (from the More library) on my website. The spinner sits in the body of my webpage, and appears when the user does a search (which uses ajax). The spinner graphic appears at the center of the body element - so, halfway down the page. This doesn't look good if the page is longer than one screen.

I initialize the spinner like this:

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

For now, I'm just using the default css, like this:

.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 and spinner-img (which I want to center) both sit inside .spinner-content, so I tried doing this in this css:

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

But it didn't do anything. I confirmed the the .spinner-content element was correctly receiving that css, so I assume the spinner internally uses some javascript to position the spinner instead.

How do I get the spinner to appear in the center of the screen?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

才能让你更想念 2024-12-08 23:29:33

试试这个：

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

Try this:

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

回复收藏 0 原文

~没有更多了~