Mootools Spinner中心屏幕

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

我初始化微调这样的：

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来定位微调器。

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

来源

2011-08-26 Oliver

，如果你设置'.spinner-content'一个'height'会发生什么？ – artlung

@artlung没有运气。 '.spinner-content'仍然位于页面中间（而不是屏幕中间）。看起来中心点位于'.spinner-content'的中心。 – Oliver

听起来好像你需要修改那个元素到屏幕的高度。 – artlung

试试这个：

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

来源

2011-09-19 15:27:04 Badda

非常感谢！这很好。我大多会放弃这个/将它放在我的“重新实现”堆上。 – Oliver

Mootools Spinner中心屏幕

回答

相关问题