在Bootstrap 3中禁用全尺寸div后面的頁面

Question

我正在使用Bootstrap 3（SB-Admin 2），並且我想禁用服務器處理表單請求時執行任何操作的可能性，因為該過程非常緩慢（大約30秒），並且用戶有時會單擊並單擊，然后單擊按鈕，發送新請求。

我曾想過用jquery顯示一個整頁且半透明的div，上面寫着“請稍候”。 我如何在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-Index必須大於999，因為某些Bootstrap功能實際上正在使用它（即導航欄）。

然后我們在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);
    });
});