在引導程序中禁用全尺寸div後面的頁面3

Question

我正在使用引導程序3（SB-Admin 2），並且想要在服務器處理表單請求時禁用任何操作的可能性，因爲該過程是非常慢（約30秒），用戶有時點擊並點擊並點擊按鈕，發送新的請求。

我想過用jquery顯示一個完整頁面和半透明的div，其中顯示「Please wait」。我怎麼能在Bootstrap 3中做到這一點？

Answer 1

這是整版的DIV + CSS：

.lightbox { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
} 

注：因爲一些引導功能是真正使用它（即導航欄）Z-指標必須大於999。

然後我們在HTML定義DIV：

<div class="lightbox" id="wait_lightbox"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     Please, wait... 
    </div> 
    </div> 
</div> 

而且使用jQuery我們捕捉到的表單提交，而無需使用的preventDefault：

$(function() { 
    $('#my_form').on('submit', function() { 
     $('#wait_lightbox').show(0); 
    }); 
});