在整個頁面中加載Overlay

Question

我在我的應用程序中使用Jquery Mobile。 如何配置加載wiget以在整個頁面上顯示加載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

Ajax調用之前 -

$('.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; 
}