Question

我是CSS的新手。我遇到的问题非常简单。

<section>
    <fieldset>
        <div>
            This div block contains the label field and the files.
        </div>
    </fieldset>
</section>

这是我的HTML代码的一部分。在div块里面，我有一个字段和一些脚本，可以帮助我上传多个文件。我想要做的是在部分或div本身上显示类似灰色div块的内容，占用空间并在上传文件时显示gif图像。

问题：我不知道如何使用css。我只寻找一些我可以添加到我的代码中的css类，并做我想要的。我知道如何修复jquery。

Answer 1

只需插入您想放置的任何位置即可。

<div class="loading">
  <img src="loading.gif">
</div>

Answer 2

使用像这样的HTML

<div class="load">
      <img src="../path">
    </div>

而css是

.load{background-color: Gray; filter: alpha(opacity=80); opacity: 0.8; z-index: 10000; text-align:center; position:absolute;}

它可以帮到你

Answer 3

已编辑： demo with gif，此处点击按钮时会出现弹出窗口，当您点击灰色背景时，弹出窗口会消失。根据你的需要将你的gif包含在div popup和ofcourse样式中，这将显示一个居中的加载gif，最初对两个div使用display：none然后使用一些jquery尝试使它们可见，我希望它可以帮助你< / p>

Answer 4

如果我理解正确，你想要一个模态弹出窗口，但只是在那个部分（而不是整个页面），显示进度图像并防止进一步点击上传字段？如果是这样，那就用这个：

<section>    
    <div id="modal" style="display: none"><img src="..."></div>
    <fieldset>
        <div>
            This div block contains the label field and the files.
        </div>
    </fieldset>
</section>

你用以下方式显示：

document.getElementById('modal').setAttribute('style', 'height: 100%; width: 100%; z-index: 1000; background-color: Gray; opacity: 0.5');

再次隐藏它：

document.getElementById('modal').setAttribute('style', 'display: none');

在一个部分上显示一个gif图像以占用空间

4 个答案: