Usage example of lightweight web page mask layer jQuery plug-in_jquery

The example in this article describes the usage of the lightweight web page mask layer jQuery plug-in. Share it with everyone for your reference. The details are as follows:

The advantage of using jQuery is that many people write some components for it, and you can also find some components to complete the functions required by the project.

Now there is a requirement that when the user clicks a button, the user is not allowed to perform any operations. Instead, a mask layer pops up to display a loading prompt box. The effect is as follows.

In fact, this requirement is very simple, but many components are too large for this requirement. I wandered around on the Internet and found a pretty good component. The author is not mentioned above. Now let’s analyze the source code and usage of this component

/**
 * @部分参数说明
 */
(function($){
 $.fn.extend({
  //主函数
  toggleLoading: function(options){
      // 找到遮罩层
    var crust = this.children(".x-loading-wanghe");
      // 当前操作的元素
      var thisjQuery = this;
      // 实现toogle(切换遮罩层出现与消失)效果的判断方法
    if(crust.length>0){
      if(crust.is(":visible")){
        crust.fadeOut(500);
      }else{
        crust.fadeIn(500);
      }
      return this;
    }
   // 扩展参数
   var op = $.extend({
    z: 9999,
    msg:'数据加载中...',
    iconUrl:'images/loading.gif',
    width:18,
    height:18,
    borderColor:'#6bc4f5',
    opacity:0.5,
        agentW:thisjQuery.outerWidth(),
        agentH:thisjQuery.outerHeight()
   },options);
   if(thisjQuery.css("position")=="static")
     thisjQuery.css("position","relative");
   //var w = thisjQuery.outerWidth(),h = thisjQuery.outerHeight();
   var w = op.agentW,h = op.agentH;
   crust = $("<div></div>").css({//外壳
    'position': 'absolute',
    'z-index': op.z,
    'display':'none',
    'width':w+'px',
    'height':h+'px',
    'text-align':'center',
    'top': '0px',
    'left': '0px',
    'font-family':'arial',
    'font-size':'12px',
    'font-weight':'500'
   }).attr("class","x-loading-wanghe");
   var mask = $("<div></div>").css({//蒙版
    'position': 'absolute',
    'z-index': op.z+1,
    'width':'100%',
    'height':'100%',
    'background-color':'#333333',
    'top': '0px',
    'left': '0px',
    'opacity':op.opacity
   });
   //71abc6,89d3f8,6bc4f5
   var msgCrust = $("<span></span>").css({//消息外壳
      'position': 'relative',
        'top': (h-30)/2+'px',
      'z-index': op.z+2,
      'height':'24px',
      'display':'inline-block',
      'background-color':'#cadbe6',
      'padding':'2px',
      'color':'#000000',
      'border':'1px solid '+op.borderColor,
      'text-align':'left',
      'opacity':0.9
     });
   var msg = $("<span>"+op.msg+"</span>").css({//消息主体
       'position': 'relative',
       'margin': '0px',
      'z-index': op.z+3,
      'line-height':'22px',
      'height':'22px',
      'display':'inline-block',
      'background-color':'#efefef',
      'padding-left':'25px',
      'padding-right':'5px',
      'border':'1px solid '+op.borderColor,
      'text-align':'left',
      'text-indent':'0'
     });
      var msgIcon = $("<img  src="/static/imghwm/default1.png"  data-src="+op.iconUrl+"  class="lazy" / alt="Usage example of lightweight web page mask layer jQuery plug-in_jquery" >").css({//图标
      'position': 'absolute',
      'top': '3px',
      'left':'3px',
      'z-index': op.z+4,
      'width':'18px',
      'height':'18px'
     });  
      // 拼装遮罩层
   msg.prepend(msgIcon);
    msgCrust.prepend(msg);
    crust.prepend(mask);
    crust.prepend(msgCrust);
   thisjQuery.prepend(crust);
     // alert(thisjQuery.html());
   crust.fadeIn(500);
   //模态设置
   return this;
  }
 });
})(jQuery);

Related configuration

Configure&configure

全部配置	默认值	说明
z:	9999	图层z-index,当蒙版遮罩不住时候适当增大其值
msg:	数据加载中...	提示信息
iconUrl:	images/loading.gif	提示图片url
height:	18	图标默认高(px)
width:	18	图标默认宽(px)
borderColor	#6bc4f5	提示的边框颜色
opacity:	0.5	蒙版的透明度
agentW:	当前元素的宽度	蒙版的宽度
agentH:	当前元素的高度	蒙版的高度

I hope this article will be helpful to everyone’s jquery programming.