jquery实现简单的遮罩层

本文实例讲解了jquery遮罩层，包括遮罩层的不同样式实现、mask实现遮罩层等，分享给大家供大家参考，具体内容如下

一、jQuery实现遮罩层的不同样式

1.1 背景半透明遮罩层样式需要一个黑色（当然也可以其他）背景，且须设置为绝对定位，以下是项目中用到的css样式：

页面 */ display:none; }

1.2 jQuery实现遮罩

显示遮罩层 */ function showOverlay() { $("#overlay").height(pageHeight()); $("#overlay").width(pageWidth());

// fadeTo第一个参数为速度，第二个为透明度
// 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
$("#overlay").fadeTo(200,0.5);
}

/ 隐藏覆盖层 /
function hideOverlay() {
$("#overlay").fadeOut(200);
}

/ @R_502_340@高度 /
function pageHeight() {
return document.body.scrollHeight;
}

/ @R_502_340@宽度 /
function pageWidth() {
return document.body.scrollWidth;
}

1.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超简单遮罩层实现代码

在开发中，为了避免二次提交，遮罩层的运用越来越普遍看了很多代码，下面跟大家分享一下我认为最简单的遮罩层实现方式： 1.样式如下设置： CSS代码：

其中：opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。 2.指定层的高度、和宽度 js代码

显示遮罩层 function showMask(){ $("#mask").css("height",$(document).height()); $("#mask").css("width",$(document).width()); $("#mask").show(); } //隐藏遮罩层 function hideMask(){

$("#mask").hide();

}

3.在中加入如下代码，然后就可以看到效果

HTML代码

点我显示遮罩层

4.使用方法

在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask() 需要的亲们可以根据自己需求，在遮罩层上面加一些提示信息

三、发布个JQuery的遮罩层实现（mask)

用过ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我们的使用。其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现，增加客户体验。由于最近做项目的时候，发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来，觉得有点不划算，于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架，不但体积小而且使用方便，我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现。好了不多说，上我的代码，这些代码是根据网上的一位朋友实现的documentMask基础上进行整改的，使用上更加灵活方便了。

'); 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=$('

'); 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(){ // 淡入淡出效果 $(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',function(){ $(this).remove(); }); } }); })();

下面是使用实例代码可供参考

测试

jquery实现简单的遮罩层

一、jQuery实现遮罩层的不同样式

二、Jquery超简单遮罩层实现代码

三、发布个JQuery的遮罩层实现（mask)

猜你在找的jQuery相关文章