jquery实现简单的遮罩层_javascript技巧

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

1.2 jQuery实现遮罩

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

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

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

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

html代码

  
点我显示遮罩层
 

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

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

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

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

以上就是jquery实现遮罩层的全部内容介绍，希望对大家的学习有所帮助。