Question

我在屏幕加载时显示进度条（加载gif）。

我的css条目如下

.hiddenDiv {
    display: none;

}

.visibleDiv {
    display: none;
}
.hiddenStyle {
    cursor: wait;
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: alpha(opacity=80);
}

.busyStyle {
        position: absolute;
        top: 300px;
        left: 580px;
        text-align: center;
        vertical-align: middle;
        font-family: arial, helvetica, verdana, sans - serif;
        color: red;
        font-size: 16px;
        font-weight: bold;

}

当我在hiddenStyle中包含background-color: white;时，在页面加载时，后面的主屏幕将被白色背景替换。

如果删除该条目，则会显示进度条，并显示主屏幕。

在显示进度条时，我想将后面的主屏幕变灰。如何通过更改CSS条目来实现此目的？

通过将CSS条目更改为

来实现此

.visibleDiv {
    z-index: 99999;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: alpha(opacity=50);
    opacity: 0.6;
    background-color: white;

}

JS中的

document.getElementById('mask').className = 'visibleDiv';

所以不透明就行了

Answer 1

您可以在文档的加载时设置以下内容：

<html><body>
<script>
document.body.style.backgroundColor='gray';
</script>
</body>
</html>

加载进度后，您可以重置正文颜色：

document.body.style.backgroundColor='#fff';

Answer 2

希望这可以帮助我在网站上实施和工作：

<强> HTML

<div id="divLoading">
    <div class="page-center">
        <div class="loadingBox">
            <div class="centered">
                Loading...
            </div>
        </div>
    </div>
</div>

将它放在页面的任何位置。

<强> CSS

#divLoading {
    margin: 0px;
    padding: 0px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 100%; height: 100%;
    background-color: #666666;
    z-index: 30001;
    opacity: .9;
    filter: alpha(opacity=90);
    display: none;
}

.page-center {
    display: inline;
    top: 50%;
    left: 50%;
    position: relative;
}

.loadingBox {
  border: 2px solid black;
  border-radius: 20px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
  width: 300px;
  height: 100px;
  background-color: white;
}

.centered {
    text-align: center;
}

当您调用上述加载方法（显示进度条的方法）时，也请调用：

$("#divLoading").show();

它将在其他所有方面展示一个div。完成进度后，请致电：

$("#divLoading").hide();

加载gif时保持主屏幕显示为灰色

2 个答案: