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中心屏幕

回答

相關問題