看了很多代码，下面跟大家分享一下我认为最简单的遮罩层实现方式：

1.样式如下设置：

CSS代码：

  1. <style type="text/css">
  2. .mask {
  3. position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
  4. z-index: 1002; left: 0px;
  5. opacity:0.5; -moz-opacity:0.5;
  6. }
  7. </style>

其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。

2.指定层的高度、和宽度。

js代码

  1. <pre class="html" name="code"><script type="text/javascript">
  2. //兼容火狐、IE8
  3. //显示遮罩层
  4. function showMask(){
  5. $("#mask").css("height",$(document).height());
  6. $("#mask").css("width",$(document).width());
  7. $("#mask").show();
  8. }
  9. //隐藏遮罩层
  10. function hideMask(){
  11. $("#mask").hide();
  12. }
  13. </script>


3.在<body>中加入如下代码，然后就可以看效果了：


html代码




  1. <div id="mask" class="mask"></div>
    2. 

  2. <a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />




4.使用方法：


在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask()


需要的亲们可以根据自己需求，在遮罩层上面加一些提示信息




 


 
												


											
Jquery超简单遮罩层实现代码的更多相关文章
	

    
								
  1. 基于jquery hover图片遮罩层滑动
		
    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...
    
		
    2. 
						
  2. jQuery弹出遮罩层效果完整示例
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    3. 
						
  3. jquery实现div遮罩层
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    4. 
						
  4. js实现的简单遮罩层
		
    超级简单的一个实现,可能会有局限性,贵在简单易懂,使用的时候执行前loading,执行成功后loaded /* * 显示loading遮罩层 */ function loading() { var m ...
    
		
    5. 
						
  5. jquery 超简单的点赞效果
		
    1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...
    
		
    6. 
						
  6. 超简单！80行代码实现Google日历（拖放、移动、AJAX）
		
    介绍 本实例介绍使用DayPilot Lite for ASP.NET MVC library 类来实现类google日历效果. 在线实例 天视图  星期视图  拖放调整  拖放移动  行代码来实现a ...
    
		
    7. 
						
  7. jQuery弹出关闭遮罩层
		
    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
    
		
    8. 
						
  8. jquery弹出关闭遮罩层实例
		
    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
    
		
    9. 
						
  9. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
		
    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C[泊车管理系统]
			
    // //  main.c //  泊车管理系统 // //  Created by 丁小未 on 13-7-14. //  Copyright (c) 2013年 dingxiaowei. All  ...
    
			
    2. 
						
  2. Linux学习笔记（16）shell基础之Bash变量
			
    1. 用户自定义变量 (1)变量设置规则 ① 变量名称可由字母.数字和下划线组成,但不能以数字开头: ② 变量的默认类型为字符串类型,如果要对数值运算,则必须指定变量类型为数值型: ③ 变量用等号连接 ...
    
			
    3. 
						
  3. C++ 拷贝构造函数 和 六大函数
			
    1.  C++什么时候会调用 拷贝构造函数? a.一个对象作为函数参数,以值传递的方式传入函数体: b.一个对象作为函数返回值,以值传递的方式从函数返回:(实际使用时,会被编译器优化掉) c.一个对象 ...
    
			
    4. 
						
  4. ROC曲线绘制
			
    ROC 曲线绘制 个人的浅显理解:1.ROC曲线必须是针对连续值输入的,通过选定不同的阈值而得到光滑而且连续的ROC曲线,故通常应用于Saliency算法评价中,因为可以选定0~255中任意的值进行阈 ...
    
			
    5. 
						
  5. POJ 2418 字典树
			
    题目链接:http://poj.org/problem?id=2418 题意:给定一堆树的名字,现在问你每一棵树[无重复]的出现的百分比,并按树名的字典序输出 思路:最简单的就是用map来写,关于字典 ...
    
			
    6. 
						
  6. iOS10 UI教程视图的生命周期
			
    iOS10 UI教程视图的生命周期 说到视图的生命周期一般都是指视图控制器的视图生命周期.在视图的声明周期中最主要的有8个方法,分别为loadView().viewDidLoad().viewWill ...
    
			
    7. 
						
  7. 数据库的SQL语句创建和主外键删除操作
			
    create table UserType ( Id ,), Name nvarchar() not null ) go create table UserInfo ( Id ,), LoginPwd ...
    
			
    8. 
						
  8. 每天一个Linux命令---tcpdump
			
    用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的“头” ...
    
			
    9. 
						
  9. SOAPUI测试步骤之流量控制(Conditional Goto)
			
    1. TestSteps流量控制 1.1.有条件转到一步步测试 Conditional Goto拥有任意数量的的XPath表达式伴随相应的目标测试步骤.这些被应用到在先前的采样测试的最近的响应; 配置 ...
    
			
    10. 
						
  10. BZOJ4231 : 回忆树
			
    一个长度为$|S|$的串在树上匹配有两种情况: 1.在LCA处转弯,那么这种情况只有$O(|S|)$次,暴力提取出长度为$2|S|$的链进行KMP即可. 2.不转弯,那么可以拆成两个到根路径的询问.  ...
    
			
    11.