JQuery+Bootstrap 自定義全屏Loading插件

/** * 自定義Loading插件 * @param {Object} config * { * content[加載顯示文本], * time[自動關閉等待時間(ms)] * }  * @param {String} config  * 加載顯示文本 * @refer 依賴 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上 * @return {KZ_Loading} 對象實例 */function KZ_Loading(config) {  if (this instanceof KZ_Loading) {    const domTemplate = '<div class="modal fade kz-loading" data-kzid="@@KZ_Loadin_ID@@" backdrop="static" keyboard="false"><div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px"><div class="progress progress-striped active" style="margin-bottom: 0;"><div class="progress-bar" style="width: 100%;"></div></div><h5>@@KZ_Loading_Text@@</h5></div></div>';    this.config = {      content: 'loading...',      time: 0,    };    if (config != null) {      if (typeof config === 'string') {        this.config = Object.assign(this.config, {          content: config        });      } else if (typeof config === 'object') {        this.config = Object.assign(this.config, config);      }    }    this.id = new Date().getTime().toString();    this.state = 'hide';    /*顯示 */    this.show = function () {      $('.kz-loading[data-kzid=' + this.id + ']').modal({        backdrop: 'static',        keyboard: false      });      this.state = 'show';      if (this.config.time > 0) {        var that = this;        setTimeout(function () {          that.hide();        }, this.config.time);      }    };    /*隱藏 */    this.hide = function (callback) {      $('.kz-loading[data-kzid=' + this.id + ']').modal('hide');      this.state = 'hide';      if (callback) {        callback();      }    };    /*銷毀dom */    this.destroy = function () {      var that = this;      this.hide(function () {        var node = $('.kz-loading[data-kzid=' + that.id + ']');        node.next().remove();        node.remove();        that.show = function () {          throw new Error('對象已銷毀！');        };        that.hide = function () {};        that.destroy = function () {};      });    }    var domHtml = domTemplate.replace('@@KZ_Loadin_ID@@', this.id).replace('@@KZ_Loading_Text@@', this.config.content);    $('body').append(domHtml);  } else {    return new KZ_Loading(config);  }}

基本調用：

var loading = new KZ_Loading('數據加載中。。。');setTimeout(function () {  console.log('加載完成!');  loading.hide();}, 1000);

自動關閉：

var loading = new KZ_Loading({  content: '數據加載中。。。',  time: 2000});loading.show();

銷毀Loading Dom節點：

 loading.destroy();

ps：下面看下基于JQUERY BOOTSTRAP 最簡單的loading遮罩層

<%--loading遮罩層--%><div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">  　　<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">  　　　　<div class="progress progress-striped active" style="margin-bottom: 0;">  　　　　　　<div class="progress-bar" style="width: 100%;"></div>  　　　　</div>  　　　　<h5 id="loadText">loading...</h5>  　　</div></div><%--loading方法--%><script type="text/javascript">  var loadingTime= 5;//默認遮罩時間  showLoading = function (loadText) {    if(!loadText){      $("#loadText").html(loadText)    }    $('#loadingModal').modal({backdrop: 'static', keyboard: false});  }  hideLoading = function () {    $('#loadingModal').modal('hide');  }</script>