Show a gif image over a section to take up the space

Question

I am a total newbie at CSS. The problem I have is really simple.

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

This is a part of my HTML code. Inside the div block I have a field and some script that helps me in uploading multiple files. What I want to do is show something like a grey-div-block over the section or div itself that takes up the space and shows a gif image while the files are being uploaded.

The problem: I don't know how to work out with css. I am looking only for some css classes that I can add to my code and do what I want. I know how to fix the jquery.

Answer 1

Use html like this

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

And the css is

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

may it will help you

Answer 2

just insert wherever you want it placed.

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

Answer 3

EDITED:demo with gif , here when you click on the button the popup appears and when you click on gray backgrond the popup dissappears. Include your gif inside the div popup and ofcourse style it according to your needs , this will display a centered loading gif , use display:none to both the divs initially and then using some jquery try to make them visible , I hope it helps you

Answer 4

If I understand you correctly, you want something like a modal popup, but just over that section (not the whole page), showing progress image and preventing further clicks on the upload field? If so, then just use this:

<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>

You show it with:

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

And hide it again with:

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