Покажите изображение gif над разделом, чтобы заняться пространством

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

Использование HTML, как этот

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

И в КСС

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

может это поможет вам

Answer 2

просто вставьте туда, где хотите.

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

Answer 3

Редакцией:demo with gif, вот когда вы нажмете на появляется всплывающее окно, и когда вы нажимаете на gra y backgrond всплывающее окно исчезает. Включите ваш gif внутри всплывающего окна div и thecourse в соответствии с вашими потребностями, это отобразит центрированный гид загрузки, используйте display: none для обоих divs изначально, а затем с помощью jquery попытайтесь сделать их видимыми, я надеюсь, что это поможет вам

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');