使用Boostrap Modal建立loading页面的方法

html页面

<div class="modal " id="loadingModal" role="dialog" data-backdrop="static" data-keyboard="false">    <div class="vertical-alignment-helper">        <div class="modal-dialog vertical-align-center">                <img src="/img/loading.gif"  >        </div>     </div>    </div>  </div>

说明：
1. 以上的data-backdrop="static"用于防止鼠标点击modal造成modal关闭。
2. 以上的data-keyboard="false"用于防止按键盘造成modal关闭。

CSS代码

.vertical-alignment-helper {    display:table;    height: 100%;    width: 100%;}.vertical-align-center {    text-align: center;    /* To center vertically */    display: table-cell;    vertical-align: middle;}

说明
1. 用到了table和table-cell的方式，于是使用vertical-align是有效的。
2. text-align=center使内容水平居中，vertical-align:middle使内容垂直居中。

结果

loading的gif图居中显示，所以用boostrap做loading 页面就做好了。
可以直接在这里查看：https://jsbin.com/vaquyudodi/edit?html,css,output