bootstrap利用模态框自制loading

bootstrap是一个前端构建ui框架，常用来跟jquery一起搭建简单前端，但是官方教程中只有模态框的例子，并没有loading、alert、confirm这些组件，其实这些组件都可以用模态框modal来组建。

以loading来举例，首先去网上随便下载一个loading.gif。
html代码：

<div class="modal" id="loadingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-body" style="position:fixed;top:40%;left:50%;">
        <img  alt="" src="/image/gif/loading.gif">
    </div>
</div>

js代码：

function showLoading(){
      $("#loadingModal").modal({backdrop:"static", keyboard:false});
  }
  function hideLoading(){
      $("#loadingModal").modal('hide');
  }
  $(function(){
      showLoading();
      setTimeout(function(){
          hideLoading();
      },1000);
})

出图效果：

深度截图_选择区域_20200419132433.png

以上js代码所示，调取modal方法时，给定backdrop为static,则点击非模态框区域模态框也不会关闭，给定keyboard为false，取消键盘关闭事件，上面例子中调取showLoading()方法加载，hideLoading()方法隐藏，更多模态框的用法可以去官网看教程。

同理alert和confirm也可以实现的。但是alert和confirm有更多第三方的js库可以轻松实现，比如开源的jquery-confirm，百度一搜一大把，这里就不写例子了。