本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下：

使用jQuery的好处是很多人为它写一些组件，而在项目所需用到功能也都可以找到一些组件去完成。

现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作，取而代之的是弹出一个遮罩层显示一个装货提示框，效果如下。

其实这个需求很简单，但很多组件体积相对这个需求来说太大了，在网上瞎溜达了找到了一个还不错的组件，作者是上面也没有写。现在就来分析一下这个组件的源码和使用

/** * @部分参数说明*/(函数($){ $.fn.extend({ //主函数toggleLoading:函数（选项){ //找到遮罩层var crust=this.children(.' x-loading-Wang he ')；//当前操作的元素var thisjQuery=this//实现toogle(切换遮罩层出现与消失)效果的判断方法如果(外壳。长度0){ if(外壳。是(' :可见')} { 0外壳。淡出(500)；}else{地壳。法丁(500)；}退回这个；} //扩展参数var op=$ .extend({ z: 9999，msg: '数据加载中.'，图标URL : '图像/加载。gif '，width:18，height:18，borderColor:'#6bc4f5 '，opacity:0.5，agents : thisjquery。outwidth()，代理： thisjquery。outhough()}，options)；if(thisjquery。CSS(' position ')=' static ')thisjquery。CSS('位置'，'相对')；//var w=thisjquery。outwidth()，h=thisjquery。outh three()；var w=op.agentW，h=op.agentH外壳=$('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 ' 3: ' arial '，' font-size ' 3: ' 12px '，' font-weight ' 33330var掩码=$('div/div ').css({//蒙版position': 'absolute '，' z-index': op.z 1，' width':'100% '，' height':'100% '，' background-color':'#333333 '，' top': '0px '，' left': '0px '，' opacity ' : op . opacity })；//71 bc6，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 ' 3: ' 1px solid ' op . border color .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 ' : ' # efefefefefef '，' padding-left':'25px '，' padding-right':'5px '，' border ' 3: ' 1px 'css({//图标position': 'absolute '，' top': '3px '，' left':'3px '，' z-index': op.z 4，' width':'18px '，' height ' : ' 18px ' })；//拼装遮罩层味精。prepend(MSGicon)；msgcrust。prepend(msg)；外壳（面具);克鲁斯。prepend(MSgcrust)；thisjQuery.prepend(外壳);//alert(thisjquery。html())；地壳法丁(500);//模态设置归还这个；} });})(jQuery)；相关配置

配置配置

所有配置默认值z: 9999层z索引的描述，当掩码无法正确屏蔽时，增加其值msg:数据加载.提示信息iconUrl: images/loading.gif提示图片url height: 18图标默认高度(px) width: 18图标默认宽度(px)borderColor # 6bc 4 F5的边框颜色提示opacity: 0.5蒙版代理的透明度W:当前元素蒙版代理的宽度h 3360当前元素蒙版的高度希望本文的描述对大家的jquery程序设计有所帮助。