我如何變灰並在表格中央顯示加載GIF

Question

如何使整個<table>具有透明灰色效果，而加載圖像顯示在中間？

我想運行一些AJAX調用，並且在加載ajax上下文的同時，表格無法訪問，並且在中心加載GIF時使用灰色背景覆蓋。

Answer 1

這應該工作！這是fiddle，我欺騙了ajax，它並不那麼辛苦。我用我的Timeout函數模擬了一個ajax調用。

其他要注意的事情，你不要給那個父div一個height或width，因爲我的桌子很小，它看起來很糟糕。它確實需要position:relative，因爲它允許.page-loader人只填充該空間。

你顯然可以玩弄它。

HTML：

<div style="position: relative"> 
    <div class="page-loader"> 

     <img src="/Content/loader.gif" style="position:absolute; margin:auto; top:0; left:0; right:0; bottom:0;" width="100" alt="Loading"> 

    </div> 

    <table> 

    </table> 

</div> 

CSS：

.page-loader { 
    position:absolute; 
    height:100%; 
    width:100%; 
    background:gray; 
    -ms-opacity:0.5; 
    opacity:0.5; 
    z-index:1000000; 
    display: none; 
    margin-left: -40px; 
    margin-top: -19px; 
}