';     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遮罩层--%>