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

时间:2014-09-24 08:02:04

标签: jquery css twitter-bootstrap

我正在使用Bootstrap 3(SB-Admin 2),我想在服务器处理表单请求时禁用进行任何操作的可能性,因为该过程非常慢(大约30秒)和用户有时单击并单击并单击按钮,发送新请求。

我想过用jquery显示一个整页和半透明的div,上面写着“请等待”。我怎么能在Bootstrap 3中做到这一点?

1 个答案:

答案 0 :(得分: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);
    });
});