一个基于 JQuery 实现的遮罩层(mask)
发布时间：2018-08-17 16:05:30 所属栏目：业界 来源：站长网
导读：用过ExtJs的也许知道在ExtJs中集成了许多的UI元素可以很利便我们的行使。个中有mask()和unmask()这两个要领,这两个要领在指定的元素上添加一个遮罩层和一个提醒动静实现，增进客户体验。因为最近做项目标时辰，发明偶然为了行使这一两个要领必要引入一个比
|
用过ExtJs的也许知道在ExtJs中集成了许多的UI元素可以很利便我们的行使。个中有mask()和unmask()这两个要领,这两个要领在指定的元素上添加一个遮罩层和一个提醒动静实现，增进客户体验。因为最近做项目标时辰，发明偶然为了行使这一两个要领必要引入一个较量“复杂”的Extjs进来，认为有点不划算，于是本身用jquery实现了一个较量简朴mask、unmask要领来实现该结果。各人知道jquery是一个优越的javascript框架，不单体积小并且行使利便，我此刻逐渐将体系中行使Extjs实现的代码或组建所有改换成Jquery来实现。好了不多说，上我的代码，这些代码是按照网上的一位伴侣实现的documentMask基本长举办整改的。使行使上越发机动利便了。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
(function(){ $.extend($.fn,{ mask: function(msg,maskDivClass){ this.unmask(); // 参数 var op = { opacity: 0.8, z: 10000, bgcolor: '#ccc' }; var original=$(document.body); var position={top:0,left:0}; if(this[0] && this[0]!==window.document){ original=this; position=original.position(); } // 建设一个 Mask 层，追加到工具中 var maskDiv=$('<div class="maskdivgen"> </div>'); maskDiv.appendTo(original); var maskWidth=original.outerWidth(); if(!maskWidth){ maskWidth=original.width(); } var maskHeight=original.outerHeight(); if(!maskHeight){ maskHeight=original.height(); } maskDiv.css({ position: 'absolute', top: position.top, left: position.left, 'z-index': op.z, width: maskWidth, height:maskHeight, 'background-color': op.bgcolor, opacity: 0 }); if(maskDivClass){ maskDiv.addClass(maskDivClass); } if(msg){ var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>'); msgDiv.appendTo(maskDiv); var widthspace=(maskDiv.width()-msgDiv.width()); var heightspace=(maskDiv.height()-msgDiv.height()); msgDiv.css({ cursor:'wait', top:(heightspace/2-2), left:(widthspace/2-2) }); } maskDiv.fadeIn('fast', function(){ // 淡入淡出结果 liehuo.net $(this).fadeTo('slow', op.opacity); }) return maskDiv; }, unmask: function(){ var original=$(document.body); if(this[0] && this[0]!==window.document){ original=$(this[0]); } original.find("> div.maskdivgen").fadeOut('slow',0,function(){ $(this).remove(); }); } }); })(); 下面是行使实例代码：
（编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
