jQuery遮罩层实现方法实例详解（附遮罩层插件）

本文实例分析了jQuery遮罩层实现方法。分享给大家供大家参考，具体如下：
1 背景半透明遮罩层样式
需要一个黑色（当然也可以其他）背景，且须设置为绝对定位，以下是项目中用到的css样式：

/* 半透明的遮罩层 */#overlay {background: #000;filter: alpha（opacity=50）; /* IE的透明度 */opacity: 0.5; /* 透明度 */display: none;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 100; /* 此处的图层要大于页面 */display:none;}

2 jQuery实现遮罩

/* 显示遮罩层 */function showOverlay（） {$（"#overlay"）.height（pageHeight（））;$（"#overlay"）.width（pageWidth（））;// fadeTo第一个参数为速度，第二个为透明度// 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题$（"#overlay"）.fadeTo（200, 0.5）;}/* 隐藏覆盖层 */function hideOverlay（） {$（"#overlay"）.fadeOut（200）;}/* 当前页面高度 */function pageHeight（） {return document.body.scrollHeight;}/* 当前页面宽度 */function pageWidth（） {return document.body.scrollWidth;}

3 提示框
遮罩的目的无非让人无法操作内容，突出提示框，而提示框可参考上面的制作，z-index比遮罩层更高便可。主要问题是，如何控制提示框在浏览器居中。

/* 定位到页面中心 */function adjust（id） {var w = $（id）.width（）;var h = $（id）.height（）;var t = scrollY（） + （windowHeight（）/2） - （h/2）;if（t < 0） t = 0;var l = scrollX（） + （windowWidth（）/2） - （w/2）;if（l < 0） l = 0;$（id）.css（{left: l+"px", top: t+"px"}）;}//浏览器视口的高度function windowHeight（） {var de = document.documentElement;return self.innerHeight || （de && de.clientHeight） || document.body.clientHeight;}//浏览器视口的宽度function windowWidth（） {var de = document.documentElement;return self.innerWidth || （de && de.clientWidth） || document.body.clientWidth}/* 浏览器垂直滚动位置 */function scrollY（） {var de = document.documentElement;return self.pageYOffset || （de && de.scrollTop） || document.body.scrollTop;}/* 浏览器水平滚动位置 */function scrollX（） {var de = document.documentElement;return self.pageXOffset || （de && de.scrollLeft） || document.body.scrollLeft;}

补充：
jQuery简单遮罩层插件：
jQuery代码：

（function （$） {$.fn.ShowMask = function （options） {var defaults = {top: 150,left: 200}var options = $.extend（defaults, options）;$（"html"）.append（"<div id="ui-mask"></div><div id="ui-mask-div" style="z-index: 99999;position: fixed;top:" + options.top + "px;left:" + options.left + "px;"><img src="Images/ui-loading.gif" alt="" /><span>操作正在进行中，请耐心等待......</span></div>"）_this_ = $（"#ui-mask"）;_this_.height（$（document）.height（））_this_.show（）;};$.fn.HideMask = function （options） {_this_ = $（"#ui-mask"）;_this_.remove（）;};}）（jQuery）;

css样式：

#ui-mask{background-color: #666;position: absolute;z-index: 9999;left: 0;top: 0;display: none;width: 100%;height: 100%;opacity: 0.5;filter: alpha（opacity=50）;-moz-opacity: 0.5;}#ui-mask-div img{width: 50px;height: 50px;float: left;}#ui-mask-div span{height: 50px;line-height: 50px;display: block;float: left;color: Red;font-weight: bold;margin-left: 5px;}

使用方法：

function btn_save（）{$（this）.ShowMask（）;$.post（"url",null,function（d,s）{$（this）.HideMask（）;}）;}

希望本文所述对大家jQuery程序设计有所帮助。