Darkkz Darkkz - 15 days ago 4
jQuery Question

Disable page behind full-sized div in Bootstrap 3

I'm using Bootstrap 3 (SB-Admin 2) and I'd like to disable the possibility of making any action while the server is processing a form request, because the process is quite slow (about 30 sec) and users sometimes click and click and click the button, sending new requests.

I've thought of showing with jquery a full-page and semi-transparent div which says "Please wait". How could I do it in Bootstrap 3?

Answer

This is the full-page 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);
}

NOTE: Z-Index must be higher than 999 because some Bootstrap features are actually using it (ie. the nav-bar).

Then we define the div in the HTML:

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

And with JQuery we catch the form submit without using preventDefault:

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