js实现数据加载，页面遮罩效果

最新推荐文章于 2023-11-28 11:41:02 发布

weixin_34208283

最新推荐文章于 2023-11-28 11:41:02 发布

阅读量672

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/ryj/blog/753933

版权

为什么80%的码农都做不了架构师？>>>

实现数就加载前显示遮罩层，数据加载完隐藏遮罩层，此功能适用于数据加载，数据导入，数据导出使用场景

对应的js文件内容：
!(function() {

var __modules__ = {};

function require(id) {
var mod = __modules__[id];
var exports = 'exports';

   if (typeof mod === 'object') {
   return mod;
   }

   if (!mod[exports]) {
   mod[exports] = {};
   mod[exports] = mod.call(mod[exports], require, mod[exports], mod) || mod[exports];
   }

return mod[exports];
}

function define(path, fn) {
__modules__[path] = fn;
}

define("jquery", function() {
return jQuery;
});

/*
* ! PopupJS Date: 2014-11-09 https://github.com/aui/popupjs (c) 2009-2014
* TangBin, http://www.planeArt.cn
*
* This is licensed under the GNU LGPL, version 2.1 or later. For details,
* see: http://www.gnu.org/licenses/lgpl-2.1.html
*/

define("popup", function(require) {

var $ = require("jquery");

   var _count = 0;
   var _isIE6 = !('minWidth' in $('html')[0].style);
   var _isFixed = !_isIE6;

function Popup() {

this.destroyed = false;

   this.__popup = $('<div />')
   /* 使用 <dialog /> 元素可能导致 z-index 永远置顶的问题(chrome) */
   .css({
       display : 'none', position : 'absolute',
       /*
       * left: 0, top: 0, bottom: 'auto', right: 'auto', margin: 0,
       * padding: 0, border: '0 none', background: 'transparent'
       */
       outline : 0
   }).attr('tabindex', '-1').html(this.innerHTML).appendTo('body');

   this.__backdrop = this.__mask = $('<div />').css({
       opacity : .7, background : '#000'
   });

   // 使用 HTMLElement 作为外部接口使用，而不是 jquery 对象
   // 统一的接口利于未来 Popup 移植到其他 DOM 库中
   this.node = this.__popup[0];
   this.backdrop = this.__backdrop[0];

_count++;
}

$.extend(Popup.prototype, {

   /**
   * 初始化完毕事件，在 show()、showModal() 执行
   *
   * @name Popup.prototype.onshow
   * @event
   */

   /**
   * 关闭事件，在 close() 执行
   *
   * @name Popup.prototype.onclose
   * @event
   */

   /**
   * 销毁前事件，在 remove() 前执行
   *
   * @name Popup.prototype.onbeforeremove
   * @event
   */

   /**
   * 销毁事件，在 remove() 执行
   *
   * @name Popup.prototype.onremove
   * @event
   */

   /**
   * 重置事件，在 reset() 执行
   *
   * @name Popup.prototype.onreset
   * @event
   */

   /**
   * 焦点事件，在 foucs() 执行
   *
   * @name Popup.prototype.onfocus
   * @event
   */

   /**
   * 失焦事件，在 blur() 执行
   *
   * @name Popup.prototype.onblur
   * @event
   */

/** 浮层 DOM 素节点[*] */
node : null,

/** 遮罩 DOM 节点[*] */
backdrop : null,

/** 是否开启固定定位[*] */
fixed : false,

/** 判断对话框是否删除[*] */
destroyed : true,

/** 判断对话框是否显示 */
open : false,

/** close 返回值 */
returnValue : '',

/** 是否自动聚焦 */
autofocus : true,

/** 对齐方式[*] */
align : 'bottom left',

/** 内部的 HTML 字符串 */
innerHTML : '',

/** CSS 类名 */
className : 'ui-popup',

   /**
   * 显示浮层
   *
   * @param {HTMLElement,
   * Event} 指定位置（可选）
   */
   show : function(anchor) {

       if (this.destroyed) {
       return this;
       }

       var that = this;
       var popup = this.__popup;
       var backdrop = this.__backdrop;

this.__activeElement = this.__getActive();

       this.open = true;
       this.follow = anchor || this.follow;
       // 初始化 show 方法
       if (!this.__ready) {

popup.addClass(this.className).attr('role', this.modal ? 'alertdialog' : 'dialog').css('position', this.fixed ? 'fixed' : 'absolute');

       if (!_isIE6) {
           $(window).on('resize', $.proxy(this.reset, this));
       }

       // 模态浮层的遮罩
       if (this.modal && anchor == null) {
           var backdropCss = {
           position : 'fixed', left : 0, top : 0, width : '100%', height : '100%', overflow : 'hidden', userSelect : 'none', zIndex : this.zIndex || Popup.zIndex
           };

popup.addClass(this.className + '-modal');

           if (!_isFixed) {
           $.extend(backdropCss, {
               position : 'absolute', width : $(window).width() + 'px', height : $(document).height() + 'px'
           });
           }

           backdrop.css(backdropCss).attr({
           tabindex : '0'
           }).on('focus', $.proxy(this.focus, this));

// 锁定 tab 的焦点操作
this.__mask = backdrop.clone(true).attr('style', '').insertAfter(popup);

backdrop.addClass(this.className + '-backdrop').insertBefore(popup);

this.__ready = true;
}

       if (!popup.html()) {
           popup.html(this.innerHTML);
       }
       }
       // 气泡
       if (that.isTips) {// 修改样式
       /**
       * 调整气泡的距离
       */
       // popup.find(".ui-dialog").css({"left":"0px"});
       popup.addClass("small-follow");

}

popup.addClass(this.className + '-show').show();

backdrop.show();

this.reset().focus();
this.__dispatchEvent('show');

return this;
},

   /** 显示模态浮层。参数参见 show() */
   showModal : function() {
       this.modal = true;
       return this.show.apply(this, arguments);
   },

/** 关闭浮层 */
close : function(result) {

if (!this.destroyed && this.open) {

       if (result !== undefined) {
           this.returnValue = result;
       }

       this.__popup.hide().removeClass(this.className + '-show');
       this.__backdrop.hide();
       this.open = false;
       this.blur();// 恢复焦点，照顾键盘操作的用户
       this.__dispatchEvent('close');
       }

return this;
},

/** 销毁浮层 */
remove : function() {

       if (this.destroyed) {
       return this;
       }

this.__dispatchEvent('beforeremove');

       if (Popup.current === this) {
       Popup.current = null;
       }

       // 从 DOM 中移除节点
       this.__popup.remove();
       this.__backdrop.remove();
       this.__mask.remove();

       if (!_isIE6) {
       $(window).off('resize', this.reset);
       }

this.__dispatchEvent('remove');

       for ( var i in this) {
       delete this[i];
       }

return this;
},

/** 重置位置 */
reset : function() {

var elem = this.follow;

       if (elem) {
       this.__follow(elem);
       } else {
       this.__center();
       }

this.__dispatchEvent('reset');

return this;
},

/** 让浮层获取焦点 */
focus : function() {

       var node = this.node;
       var popup = this.__popup;
       var current = Popup.current;
       var index = this.zIndex = Popup.zIndex++;

       if (current && current !== this) {
       current.blur(false);
       }

       // 检查焦点是否在浮层里面
       if (!$.contains(node, this.__getActive())) {
       var autofocus = popup.find('[autofocus]')[0];

       if (!this._autofocus && autofocus) {
           this._autofocus = true;
       } else {
           autofocus = node;
       }

this.__focus(autofocus);
}

       // 设置叠加高度
       popup.css('zIndex', index);
       // this.__backdrop.css('zIndex', index);

Popup.current = this;
popup.addClass(this.className + '-focus');

this.__dispatchEvent('focus');

return this;
},

/** 让浮层失去焦点。将焦点退还给之前的元素，照顾视力障碍用户 */
blur : function() {

var activeElement = this.__activeElement;
var isBlur = arguments[0];

       if (isBlur !== false) {
       this.__focus(activeElement);
       }

       this._autofocus = false;
       this.__popup.removeClass(this.className + '-focus');
       this.__dispatchEvent('blur');

return this;
},

   /**
   * 添加事件
   *
   * @param {String}
   * 事件类型
   * @param {Function}
   * 监听函数
   */
   addEventListener : function(type, callback) {
       this.__getEventListener(type).push(callback);
       return this;
   },

   /**
   * 删除事件
   *
   * @param {String}
   * 事件类型
   * @param {Function}
   * 监听函数
   */
   removeEventListener : function(type, callback) {
       var listeners = this.__getEventListener(type);
       for (var i = 0; i < listeners.length; i++) {
       if (callback === listeners[i]) {
           listeners.splice(i--, 1);
       }
       }
       return this;
   },

   // 获取事件缓存
   __getEventListener : function(type) {
       var listener = this.__listener;
       if (!listener) {
       listener = this.__listener = {};
       }
       if (!listener[type]) {
       listener[type] = [];
       }
       return listener[type];
   },

   // 派发事件
   __dispatchEvent : function(type) {
       var listeners = this.__getEventListener(type);

       if (this['on' + type]) {
       this['on' + type]();
       }

       for (var i = 0; i < listeners.length; i++) {
       listeners[i].call(this);
       }
   },

   // 对元素安全聚焦
   __focus : function(elem) {
       // 防止 iframe 跨域无权限报错
       // 防止 IE 不可见元素报错
       try {
       // ie11 bug: iframe 页面点击会跳到顶部
       if (this.autofocus && !/^iframe$/i.test(elem.nodeName)) {
           elem.focus();
       }
       } catch (e) {}
   },

   // 获取当前焦点的元素
   __getActive : function() {
       try {// try: ie8~9, iframe #26
       var activeElement = document.activeElement;
       var contentDocument = activeElement.contentDocument;
       var elem = contentDocument && contentDocument.activeElement || activeElement;
       return elem;
       } catch (e) {}
   },

// 居中浮层
__center : function() {

       var popup = this.__popup;
       var $window = $(window);
       var $document = $(document);
       var fixed = this.fixed;
       var dl = fixed ? 0 : $document.scrollLeft();
       var dt = fixed ? 0 : $document.scrollTop();
       var ww = $window.width();
       var wh = $window.height();
       var ow = popup.width();
       var oh = popup.height();
       var left = (ww - ow) / 2 + dl;
       var top = (wh - oh) * 382 / 1000 + dt;// 黄金比例
       var style = popup[0].style;

       style.left = Math.max(parseInt(left), dl) + 'px';
       style.top = Math.max(parseInt(top), dt) + 'px';
   },

// 指定位置 @param {HTMLElement, Event} anchor
__follow : function(anchor) {

var $elem = anchor.parentNode && $(anchor);
var popup = this.__popup;

       if (this.__followSkin) {
       popup.removeClass(this.__followSkin);
       }

       // 隐藏元素不可用
       if ($elem) {
       var o = $elem.offset();
       if (o.left * o.top < 0) {
           return this.__center();
       }
       }

var that = this;
var fixed = this.fixed;

       var $window = $(window);
       var $document = $(document);
       var winWidth = $window.width();
       var winHeight = $window.height();
       var docLeft = $document.scrollLeft();
       var docTop = $document.scrollTop();

       var popupWidth = popup.width();
       var popupHeight = popup.height();
       var width = $elem ? $elem.outerWidth() : 0;
       var height = $elem ? $elem.outerHeight() : 0;
       var offset = this.__offset(anchor);
       var x = offset.left;
       var y = offset.top;
       var left = fixed ? x - docLeft : x;
       var top = fixed ? y - docTop : y;

       var minLeft = fixed ? 0 : docLeft;
       var minTop = fixed ? 0 : docTop;
       var maxLeft = minLeft + winWidth - popupWidth;
       var maxTop = minTop + winHeight - popupHeight;

       var temp = [ {
       top : top - popupHeight, bottom : top + height, left : left - popupWidth, right : left + width
       }, {
       top : top, bottom : top - popupHeight + height, left : left, right : left - popupWidth + width
       } ];

       var center = {
       left : left + width / 2 - popupWidth / 2, top : top + height / 2 - popupHeight / 2
       };

       var range = {
       left : [ minLeft, maxLeft ], top : [ minTop, maxTop ]
       };

// 超出可视区域重新适应位置
$.each(align, function(i, val) {

       // 超出右或下边界：使用左或者上边对齐
       if (temp[i][val] > range[name[val]][1]) {
           val = align[i] = reverse[val];
       }

       // 超出左或右边界：使用右或者下边对齐
       if (temp[i][val] < range[name[val]][0]) {
           align[i] = reverse[val];
       }

});

       // 一个参数的情况
       if (!align[1]) {
       name[align[1]] = name[align[0]] === 'left' ? 'top' : 'left';
       temp[1][align[1]] = center[name[align[1]]];
       }

// 添加follow的css, 为了给css使用
className += align.join('-') + ' ' + this.className + '-follow';

that.__followSkin = className;

       if ($elem) {
       popup.addClass(className);
       }

       css[name[align[0]]] = parseInt(temp[0][align[0]]);
       css[name[align[1]]] = parseInt(temp[1][align[1]]);
       popup.css(css);

   // 获取元素相对于页面的位置（包括iframe内的元素）
   // 暂时不支持两层以上的 iframe 套嵌
   __offset : function(anchor) {

       var isNode = anchor.parentNode;
       var offset = isNode ? $(anchor).offset() : {
       left : anchor.pageX, top : anchor.pageY
       };

       anchor = isNode ? anchor : anchor.target;
       var ownerDocument = anchor.ownerDocument;
       var defaultView = ownerDocument.defaultView || ownerDocument.parentWindow;

       if (defaultView == window) {// IE <= 8 只能使用两个等于号
       return offset;
       }

       // {Element: Ifarme}
       var frameElement = defaultView.frameElement;
       var $ownerDocument = $(ownerDocument);
       var docLeft = $ownerDocument.scrollLeft();
       var docTop = $ownerDocument.scrollTop();
       var frameOffset = $(frameElement).offset();
       var frameLeft = frameOffset.left;
       var frameTop = frameOffset.top;

       return {
       left : offset.left + frameLeft - docLeft, top : offset.top + frameTop - docTop
       };
   }

});

/** 当前叠加高度 */
Popup.zIndex = 1024;

/** 顶层浮层的实例 */
Popup.current = null;

return Popup;

});

// artDialog - 默认配置
define("dialog-config", {

/* -----已注释的配置继承自 popup.js，仍可以再这里重新定义它----- */

   // 对齐方式
   // align: 'bottom left',
   // 是否固定定位
   // fixed: false,
   // 对话框叠加高度值(重要：此值不能超过浏览器最大限制)
   // zIndex: 1024,
   // 设置遮罩背景颜色
   backdropBackground : '#000',

// 设置遮罩透明度
backdropOpacity : 0.5,

// 消息内容
content : '<span class="ui-dialog-loading">Loading..</span>',

// 标题
title : '',

// 对话框状态栏区域 HTML 代码
statusbar : '',

// 自定义按钮
button : null,

// 确定按钮回调函数
ok : null,

// 取消按钮回调函数
cancel : null,

// 确定按钮文本
okValue : 'ok',

// 取消按钮文本
cancelValue : 'cancel',

cancelDisplay : true,

// 内容宽度
width : '',

// 内容高度
height : '',

// 内容与边界填充距离
padding : '',

// 对话框自定义 className
skin : '',

// 是否支持快捷关闭（点击遮罩层自动关闭）
quickClose : false,

   // css 文件路径，留空则不会使用 js 自动加载样式
   // 注意：css 只允许加载一个
   cssUri : '../css/ui-dialog.css',

   // 模板（使用 table 解决 IE7 宽度自适应的 BUG）
   // js 使用 i="***" 属性识别结构，其余的均可自定义
   innerHTML : '<div i="dialog" class="ui-dialog">' + '<div class="ui-dialog-arrow-a"></div>' + '<div class="ui-dialog-arrow-b"></div>' + '<table class="ui-dialog-grid">' + '<tr>'
       + '<td i="header" class="ui-dialog-header">' + '<button i="close" class="ui-dialog-close">×</button>' + '<div i="title" class="ui-dialog-title"></div>' + '</td>' + '</tr>'
       + '<tr>' + '<td i="body" class="ui-dialog-body">' + '<div i="content" class="ui-dialog-content"></div>' + '</td>' + '</tr>' + '<tr>' + '<td i="footer" class="ui-dialog-footer">'
       + '<div i="statusbar" class="ui-dialog-statusbar"></div>' + '<div i="button" class="ui-dialog-button"></div>' + '</td>' + '</tr>' + '</table>' + '</div>'

});

/*
* ! artDialog Date: 2014-11-09 https://github.com/aui/artDialog (c)
* 2009-2014 TangBin, http://www.planeArt.cn
*
* This is licensed under the GNU LGPL, version 2.1 or later. For details,
* see: http://www.gnu.org/licenses/lgpl-2.1.html
*/
define("dialog", function(require) {

   var $ = require("jquery");
   var Popup = require("popup");
   var defaults = require("dialog-config");
   var css = defaults.cssUri;

   // css loader: RequireJS & SeaJS
   if (css) {
   var fn = require[require.toUrl ? 'toUrl' : 'resolve'];
   if (fn) {
       css = fn(css);
       css = '<link rel="stylesheet" href="' + css + '" />';
       if ($('base')[0]) {
       $('base').before(css);
       } else {
       $('head').append(css);
       }
   }
   }

   var _count = 0;
   var _expando = new Date() - 0; // Date.now()
   var _isIE6 = !('minWidth' in $('html')[0].style);
   var _isMobile = 'createTouch' in document && !('onmousemove' in document) || /(iPhone|iPad|iPod)/i.test(navigator.userAgent);
   var _isFixed = !_isIE6 && !_isMobile;

var artDialog = function(options, ok, cancel) {

var originalOptions = options = options || {};

if (typeof options === 'string' || options.nodeType === 1) {

       options = {
       content : options, fixed : !_isMobile
       };
   }

options = $.extend(true, {}, artDialog.defaults, options);
options.original = originalOptions;

var id = options.id = options.id || _expando + _count;
var api = artDialog.get(id);

   // 如果存在同名的对话框对象，则直接返回
   if (api) {
       return api.focus();
   }

   // 目前主流移动设备对fixed支持不好，禁用此特性
   if (!_isFixed) {
       options.fixed = false;
   }

   // 快捷关闭支持：点击对话框外快速关闭对话框
   if (options.quickClose) {
       options.modal = true;
       options.backdropOpacity = 0;
   }

   // 按钮组
   if (!$.isArray(options.button)) {
       options.button = [];
   }

   // 取消按钮
   if (cancel !== undefined) {
       options.cancel = cancel;
   }

   if (options.cancel) {
       options.button.push({
       id : 'cancel', value : options.cancelValue, callback : options.cancel, display : options.cancelDisplay
       });
   }

   // 确定按钮
   if (ok !== undefined) {
       options.ok = ok;
   }

   if (options.ok) {
       options.button.push({
       id : 'ok', value : options.okValue, callback : options.ok, autofocus : true
       });
   }

return artDialog.list[id] = new artDialog.create(options);
};

   var popup = function() {};
   popup.prototype = Popup.prototype;
   var prototype = artDialog.prototype = new popup();

artDialog.create = function(options) {
var that = this;

$.extend(this, new Popup());

   var originalOptions = options.original;
   var $popup = $(this.node).html(options.innerHTML);
   var $backdrop = $(this.backdrop);

this.options = options;
this._popup = $popup;

   $.each(options, function(name, value) {
       if (typeof that[name] === 'function') {
       that[name](value);
       } else {
       that[name] = value;
       }
   });

   // 更新 zIndex 全局配置
   if (options.zIndex) {
       Popup.zIndex = options.zIndex;
   }

   // 设置 ARIA 信息
   $popup.attr({
       'aria-labelledby' : this._$('title').attr('id', 'title:' + this.id).attr('id'), 'aria-describedby' : this._$('content').attr('id', 'content:' + this.id).attr('id')
   });

   // 关闭按钮
   this._$('close').css('display', this.cancel === false ? 'none' : '').attr('title', this.cancelValue).on('click', function(event) {
       that._trigger('cancel');
       event.preventDefault();
   });

   // 添加视觉参数
   this._$('dialog').addClass(this.skin);
   this._$('body').css('padding', this.padding);

   // 点击任意空白处关闭对话框
   if (options.quickClose) {
       $backdrop.on('onmousedown' in document ? 'mousedown' : 'click', function() {
       that._trigger('cancel');
       return false;// 阻止抢夺焦点
       });
   }

   // 遮罩设置
   this.addEventListener('show', function() {
       $backdrop.css({
       opacity : 0, background : options.backdropBackground
       }).animate({
       opacity : options.backdropOpacity
       }, 150);
   });

   // ESC 快捷键关闭对话框
   this._esc = function(event) {
       var target = event.target;
       var nodeName = target.nodeName;
       var rinput = /^input|textarea$/i;
       var isTop = Popup.current === that;
       var keyCode = event.keyCode;

       // 避免输入状态中 ESC 误操作关闭
       if (!isTop || rinput.test(nodeName) && target.type !== 'button') {
       return;
       }

       if (keyCode === 27) {
       that._trigger('cancel');
       }
   };

   $(document).on('keydown', this._esc);
   this.addEventListener('remove', function() {
       $(document).off('keydown', this._esc);
       delete artDialog.list[this.id];
   });

_count++;

artDialog.oncreate(this);

return this;
};

artDialog.create.prototype = prototype;

$.extend(prototype, {

   /**
   * 显示对话框
   *
   * @name artDialog.prototype.show
   * @param {HTMLElement
   * Object, Event Object} 指定位置（可选）
   */

   /**
   * 显示对话框（模态）
   *
   * @name artDialog.prototype.showModal
   * @param {HTMLElement
   * Object, Event Object} 指定位置（可选）
   */

   /**
   * 关闭对话框
   *
   * @name artDialog.prototype.close
   * @param {String,
   * Number} 返回值，可被 onclose 事件收取（可选）
   */

   /**
   * 销毁对话框
   *
   * @name artDialog.prototype.remove
   */

   /**
   * 重置对话框位置
   *
   * @name artDialog.prototype.reset
   */

   /**
   * 让对话框聚焦（同时置顶）
   *
   * @name artDialog.prototype.focus
   */

   /**
   * 让对话框失焦（同时置顶）
   *
   * @name artDialog.prototype.blur
   */

   /**
   * 添加事件
   *
   * @param {String}
   * 事件类型
   * @param {Function}
   * 监听函数
   * @name artDialog.prototype.addEventListener
   */

   /**
   * 删除事件
   *
   * @param {String}
   * 事件类型
   * @param {Function}
   * 监听函数
   * @name artDialog.prototype.removeEventListener
   */

   /**
   * 对话框显示事件，在 show()、showModal() 执行
   *
   * @name artDialog.prototype.onshow
   * @event
   */

   /**
   * 关闭事件，在 close() 执行
   *
   * @name artDialog.prototype.onclose
   * @event
   */

   /**
   * 销毁前事件，在 remove() 前执行
   *
   * @name artDialog.prototype.onbeforeremove
   * @event
   */

   /**
   * 销毁事件，在 remove() 执行
   *
   * @name artDialog.prototype.onremove
   * @event
   */

   /**
   * 重置事件，在 reset() 执行
   *
   * @name artDialog.prototype.onreset
   * @event
   */

   /**
   * 焦点事件，在 foucs() 执行
   *
   * @name artDialog.prototype.onfocus
   * @event
   */

   /**
   * 失焦事件，在 blur() 执行
   *
   * @name artDialog.prototype.onblur
   * @event
   */

   /**
   * 设置内容
   *
   * @param {String,
   * HTMLElement} 内容
   */
   content : function(html) {

var $content = this._$('content');

       // HTMLElement
       if (typeof html === 'object') {
       html = $(html);
       $content.empty('').append(html.show());
       this.addEventListener('beforeremove', function() {
           $('body').append(html.hide());
       });
       // String
       } else {
       $content.html(html);
       }

return this.reset();
},

   /**
   * 设置标题
   *
   * @param {String}
   * 标题内容
   */
   title : function(text) {
       this._$('title').text(text);
       this._$('header')[text ? 'show' : 'hide']();
       return this;
   },

   /** 设置宽度 */
   width : function(value) {
       this._$('content').css('width', value);
       return this.reset();
   },

   /** 设置高度 */
   height : function(value) {
       this._$('content').css('height', value);
       return this.reset();
   },

   /**
   * 设置按钮组
   *
   * @param {Array,
   * String} Options: value, callback, autofocus,
   * disabled
   */
   button : function(args) {
       args = args || [];
       var that = this;
       var html = '';
       var number = 0;
       this.callbacks = {};

       if (typeof args === 'string') {
       html = args;
       number++;
       } else {
       $.each(args, function(i, val) {

           var id = val.id = val.id || val.value;
           var style = '';
           that.callbacks[id] = val.callback;

           if (val.display === false) {
           style = ' style="display:none"';
           } else {
           number++;
           }

html += '<button' + ' type="button"' + ' i-id="' + id + '"' + style + (val.disabled ? ' disabled' : '') + (val.autofocus ? ' autofocus class="ui-dialog-autofocus"' : '') + '>'
+ val.value + '</button>';

           that._$('button').on('click', '[i-id=' + id + ']', function(event) {
           var $this = $(this);
           if (!$this.attr('disabled')) {// IE BUG
               that._trigger(id);
           }

event.preventDefault();
});

});
}

this._$('button').html(html);
this._$('footer')[number ? 'show' : 'hide']();

return this;
},

statusbar : function(html) {
this._$('statusbar').html(html)[html ? 'show' : 'hide']();

return this;
},

   _$ : function(i) {
       return this._popup.find('[i=' + i + ']');
   },

   // 触发按钮回调函数
   _trigger : function(id) {
       var fn = this.callbacks[id];

return typeof fn !== 'function' || fn.call(this) !== false ? this.close().remove() : this;
}

});

artDialog.oncreate = $.noop;

   /** 获取最顶层的对话框API */
   artDialog.getCurrent = function() {
   return Popup.current;
   };

   /**
   * 根据 ID 获取某对话框 API
   *
   * @param {String}
   * 对话框 ID
   * @return {Object} 对话框 API (实例)
   */
   artDialog.get = function(id) {
   return id === undefined ? artDialog.list : artDialog.list[id];
   };

artDialog.list = {};

   /**
   * 默认配置
   */
   artDialog.defaults = defaults;

return artDialog;

});

window.dialog = require("dialog");

})();

引入页面进行调用代码:

显示遮罩：

var content = "<div class='dialog-tip-msg'><div class='dialog-tip-msg-icon loading'></div><div class='dialog-tip-msg-content'>数据导出中......</div></div>";
               var d=dialog({
                   content : content
               });
           d.showModal();

移除遮罩：

d.remove();

转载于:https://my.oschina.net/ryj/blog/753933