使用框架制作网页面遮罩层插件的实例教程

在网页上经常遇到需要等待很久的操作，比如导出报表等。为了预防用户点击其他操作或者多次点击同个功能，需要用遮罩层把页面或者操作区盖住，防止用户进行下一步操作，同时可以提高界面友好度，让用户知道操作正在执行。

$.fn.extend({ /** *给元素添加遮罩层* @param消息{字符串} [可选]遮罩层显示内容*/mask:函数（消息){ var $target=this，fixed=false，targetStatic=trueif(object。原型。tostring。呼叫(消息)!=='[对象字符串]' ||!消息){ //如果消息为空或者不是字符串，则用默认的消息提示消息='请稍候。';} if($ target。length===0){ $ target=$(' body ')；} else { if($ target。长度1){ $ target=$ target。first()；} if($ target[0]===window | | $ target[0]===document){ $ target=$(' body ')；} } if($ target[0]==document。body){ fixed=true；} //如果目标元素已经有遮罩层，获取遮罩层var old=$ target。数据(' rhui。mask’)；if (old) { old .$content.html(消息);中心($target，旧的.$内容，固定);返回；} //如果被遮盖的元素是静态的，把元素改成相对if($ target。CSS(' position ')===' static '){ targetStatic=true；$target.css('position '，' relative ')；} var $content，$ overlayif(固定){ $ overlay=$(' div class=' rhui-mask ' style=' position : fixed；/div ')；$ content=$(' div class=' rhui-mask-content ' style=' position : fixed；"/div "消息；} else { $ overlay=$(' div class=' rhui-mask '/div ')；$ content=$(' div class=' rhui-mask-content ' ' message '/div ')；} $叠加。appendo($ target)；$内容。appendo($ target)；//显示遮罩层$叠加。show()；$内容。show()；//让遮罩层居中中心($target，$content，固定)；//把遮罩层信息添加到$target $target.data('rhui.mask '，{ fixed: fixed，$overlay: $overlay，$content: $content，target static : target static })；/** * 让遮罩层内容居中显示* @ param $目标被遮盖的元素* @ param $内容遮罩层内容元素* @param已修复遮罩层是否固定显示*/function center($target，$content，fixed) { var $window，height=$ content。外八(真)，宽度=$ content。out width(true)；如果(固定){ //如果遮罩层固定显示，让遮罩层在窗户居中$ window=$(window)；$内容。CSS({ left :($ window。width()-width)/2，top :($ window)。height()-height)/2 })；} else { //让遮罩层在$目标中居中$内容。CSS({ left :($ target。width()-width)/2，顶部：($ target)。height()-height)/2 })；} } }, /** * 取消遮罩层*/unmask:函数(){ var $ targetif(this。length===0){ $ target=$(' body ')；} else { $ target=this。first()；if($ target[0]===window | | $ target[0]===document){ $ target=$(' body ')；} } var数据=$ target。数据(' rhui。mask’)；if(！数据){ return} //还原目标元素的位置属性if(数据。targetstatic){ $ target。CSS('位置'，'静态')；}数据$叠加。移除()；数据$内容。移除()；$目标。移除数据(' rhui。mask’)；} });插件样式由rhui-mask和rhui-掩码-内容类控制rhui-mask是遮罩层样式，rhui-遮罩-内容是遮罩层的提示内容样式。

/* 遮罩层样式*/.rhui-mask {位置：绝对；top : 0；右： 0；底部： 0；左： 0；z指数： 9000；显示器：块；保证金： 0；padd : 0；边框样式：无；背景色： # 777;opa city 3360 0.3 zoom : 1；filter: alpha(不透明度=30);} /* 遮罩层显示内容样式*/.rhui-mask-content {位置：绝对；z指数： 9999；显示器：块；保证金： 0；padd : 15px 20pxborder : 2px实心rgb(109，157，215)；背景-color : # fff；颜色：蓝色；字母间距2pxfont-weight:粗体；font-size : 15px光标：等待；} 效果如图所示

页面调用完整代码

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8' /标题网页遮罩层的实现/title style type='text/css' /*遮罩层样式*/.rhui-mask {位置：绝对；top : 0；右： 0；底部： 0；左： 0；z指数： 9000；显示器：块；保证金： 0；padd : 0；边框样式：无；背景色： # 777;opa city 3360 0.3 zoom : 1；filter: alpha(不透明度=30);} /* 遮罩层显示内容样式*/.rhui-mask-content {位置：绝对；z指数： 9999；显示器：块；保证金： 0；padd : 15px 20pxborder : 2px实心rgb(109，157，215)；背景-color : # fff；颜色：蓝色；字母间距2pxfont-weight:粗体；font-size : 15px光标：等待；}/style脚本类型=' text/JavaScript ' src=' http :3358 cdn。bootcss。com/jquery/1。11 .3/jquery。js '/script脚本类型=' text/JavaScript ' $。fn。扩展({/* * *给元素添加遮罩层* @param消息{字符串} [可选]遮罩层显示内容*/mask:函数（消息){ var $target=this，fixed=false，targetStatic=trueif(object。原型。tostring。呼叫(消息)!=='[对象字符串]' ||!消息){ //如果消息为空或者不是字符串，则用默认的消息提示消息='请稍候。

；} if($ target。length===0){ $ target=$(' body ')；} else { if($ target。长度1){ $ target=$ target。first()；} if($ target[0]===window | | $ target[0]===document){ $ target=$(' body ')；} } if($ target[0]==document。body){ fixed=true；} //如果目标元素已经有遮罩层，获取遮罩层var old=$ target。数据(' rhui。mask’)；if (old) { old .$content.html(消息);中心($target，旧的.$内容，固定);返回；} //如果被遮盖的元素是静态的，把元素改成相对if($ target。CSS(' position ')===' static '){ targetStatic=true；$target.css('position '，' relative ')；} var $content，$ overlayif(固定){ $ overlay=$(' div class=' rhui-mask ' style=' position : fixed；/div ')；$ content=$(' div class=' rhui-mask-content ' style=' position : fixed；'消息/div ')；} else { $ overlay=$(' div class=' rhui-mask '/div ')；$ content=$(' div class=' rhui-mask-content ' ' message '/div ')；} $叠加。appendo($ target)；$内容。appendo($ target)；//显示遮罩层$叠加。show()；$内容。show()；//让遮罩层居中中心($target，$content，固定)；//把遮罩层信息添加到$target $target.data('rhui.mask '，{ fixed: fixed，$overlay: $overlay，$content: $content，target static : target static })；/** * 让遮罩层内容居中显示* @ param $目标被遮盖的元素* @ param $内容遮罩层内容元素* @param已修复遮罩层是否固定显示*/function center($target，$content，fixed) { var $window，height=$ content。外八(真)，宽度=$ content。out width(true)；如果(固定){ //如果遮罩层固定显示，让遮罩层在窗户居中$ window=$(window)；$内容。CSS({ left :($ window。width()-width)/2，top :($ window)。height()-height)/2 })；} else { //让遮罩层在$目标中居中$内容。CSS({ left :($ target。width()-width)/2，顶部：($ target)。height()-height)/2 })；} } }, /** * 取消遮罩层*/unmask:函数(){ var $ targetif(this。length===0){ $ target=$(' body ')；} else { $ target=this。first()；if($ target[0]===window | | $ target[0]===document){ $ target=$(' body ')；} } var数据=$ target。数据(' rhui。mask’)；if(！数据){ return} //还原目标元素的位置属性if(数据。targetstatic){ $ target。CSS('位置'，'静态')；}数据$叠加。移除()；数据$内容。移除()；$目标。移除数据(' rhui。mask’)；} });/script/head body div id=' div ' style=' width :600 px；高度：300 pxmargin :10 pxborder 33601 px纯红；/div脚本类型=' text/JavaScript ' $(function(){//遮盖整个页面//只要对窗口、文档和身体使用遮罩层，都会遮盖整个页面//$(窗口)。mask()；//$(窗口)。unmask()；取消遮罩//遮盖div $('#div ').' mask('加载中，请稍候。');});/脚本/正文/html