Question

当加载图像显示在中间时，如何使整个<table>具有透明的灰色效果？

我想运行一些AJAX调用并让表格无法访问，并且在加载ajax上下文的同时，在中心加载GIF的灰色背景覆盖。

Answer 1

这应该有效！这是fiddle，我用ajax作弊，不是那么难。我使用Timeout函数模拟了一个ajax调用。

其他需要注意的事项是，你不能给父母一个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;
}

如何灰显并在表格中心显示加载GIF

1 个答案: