Загрузка с помощью Overlay по всей странице

Question

Я использую JQuery Mobile в своем приложении. Как настроить загрузчик для отображения темного наложения за загрузочным gif на всей странице?

Спасибо за повторы.

Лучшие reguards, Кевин

Answer 1

Взгляните на этот учебник или различными способами для достижения этой цели: http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/

А потом играть с z-index собственности, чтобы поместить его за погрузкой.

Я лично сделал бы это с фиксированным элементом. Например:

.overlay{ 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); 
    height: 100%; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 101; 
} 

Answer 2

Я нашел эту скрипку, это поможет?

http://jsfiddle.net/5GB6B/1/

.ui-loader-background { 
    width:100%; 
    height:100%; 
    top:0; 
    padding: 0; 
    margin: 0; 
    background: rgba(0, 0, 0, 0.3); 
    display:none; 
    position: fixed; 
    z-index:100; 
} 

.ui-loading .ui-loader-background { 
    display:block; 
} 

Answer 3

Перед АЯКС вызова -

$('.waitpage').show(); 

и на момент завершения -

$('.waitpage').hide(); 

HTML -

<div class="waitpage" id="waitpage" style="display: none;"> 
    <div class="waitpage-box"> 
     <p> 
      <img alt="(Loading)" src="/Content/images/loader.gif"> 
      <span>Please Wait...</span> 
     </p> 
    </div> 
</div> 

CSS -

.waitpage { 
    background: url(../images/blockUI.png) repeat scroll 0 0 rgba(0,0,0,0); 
    height: 100%; 
    left: 0; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 999; 
} 

.waitpage-box { 
    background: none repeat scroll center center #fff; 
    border: 1px solid #999; 
    border-radius: 5px 5px 5px 5px; 
    box-shadow: 0 1px 4px 0 #666; 
    left: 44%; 
    overflow: auto; 
    padding: 16px; 
    position: fixed; 
    text-align: center; 
    top: 46%; 
    z-index: 99999; 
} 
.waitpage-box p img { 
    color: #d0622b; 
    float: left; 
    font-size: 14px; 
    font-style: italic; 
    font-weight: bold; 
} 
.waitpage-box p span { 
    float: left; 
    font-size: .8125em; 
    font-weight: bold; 
    padding: 6px 0 0 12px; 
    white-space: nowrap; 
}