Jquery超简单遮罩层实现代码
看了很多代码，下面跟大家分享一下我认为最简单的遮罩层实现方式：
1.样式如下设置：
CSS代码：
- <style type="text/css">
- .mask {
- position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
- z-index: 1002; left: 0px;
- opacity:0.5; -moz-opacity:0.5;
- }
- </style>
其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。
2.指定层的高度、和宽度。
js代码
- <pre class="html" name="code"><script type="text/javascript">
- //兼容火狐、IE8
- //显示遮罩层
- function showMask(){
- $("#mask").css("height",$(document).height());
- $("#mask").css("width",$(document).width());
- $("#mask").show();
- }
- //隐藏遮罩层
- function hideMask(){
- $("#mask").hide();
- }
- </script>
3.在<body>中加入如下代码，然后就可以看效果了：
html代码
- <div id="mask" class="mask"></div>
- <a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
4.使用方法：
在ajax提交表单后，加上showMask方法，数据返回后，加上hideMask()
需要的亲们可以根据自己需求，在遮罩层上面加一些提示信息
Jquery超简单遮罩层实现代码的更多相关文章
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- jQuery弹出遮罩层效果完整示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现div遮罩层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现的简单遮罩层
超级简单的一个实现,可能会有局限性,贵在简单易懂,使用的时候执行前loading,执行成功后loaded /* * 显示loading遮罩层 */ function loading() { var m ...
- jquery 超简单的点赞效果
1.HTML(可以优化一下,尽量少些几个标签.....) <div id="dianz"> <b class="cz"><em&g ...
- 超简单！80行代码实现Google日历（拖放、移动、AJAX）
介绍 本实例介绍使用DayPilot Lite for ASP.NET MVC library 类来实现类google日历效果. 在线实例 天视图 星期视图 拖放调整 拖放移动 行代码来实现a ...
- jQuery弹出关闭遮罩层
效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- jquery弹出关闭遮罩层实例
jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
随机推荐
- C# 拓展方法
/// <summary> /// 扩展类 /// </summary> public static class Extend { /// <summary> // ...
- 湖南省第十二届大学生计算机程序设计竞赛 F 地铁 多源多汇最短路
1808: 地铁 Description Bobo 居住在大城市 ICPCCamp. ICPCCamp 有 n 个地铁站,用 1,2,…,n 编号. m 段双向的地铁线路连接 n 个地铁站,其中第 i ...
- I/O复用模型之select学习
linux下的I/O模型可以分为5种: 1.阻塞式I/O模型 2.非阻塞式I/O模型 3.I/O复用模型 4.信号驱动I/O模型 5.异步I/O模型 简单解释: 阻塞和非阻塞:就是说需要做一件事的时候 ...
- 关于MFC OpenGL环境配置的一点总结
复制include时要小心..看vs给你load哪一个..名字一样..东西可不一定一样哦 http://www.cppblog.com/wicbnu/archive/2010/09/30/128123 ...
- 日常UVA题目英语积累
quote应该是引号的意思 Two matches (i, j) and (p, q) are called independent when i = p if and only if j = q. ...
- 深入理解KMP算法
前言:本人最近在看<大话数据结构>字符串模式匹配算法的内容,但是看得很迷糊,这本书中这块的内容感觉基本是严蔚敏<数据结构>的一个翻版,此书中给出的代码实现确实非常精炼,但是个人 ...
- Liferay 6.2 改造系列之二十：修改默认添加用户权限及用户是否拥有个人站点的配置
1.修改默认添加用户权限为User,而非Powers User: 在/portal-master/portal-impl/src/portal.properties文件中有如下配置: # # Inpu ...
- vim使用01
安装与基础配置 iTerm快捷操作 清屏: <C l>/<W k> 剪切: <W x> 复制: <W v> 新增窗口: <W d> 切换窗口 ...
- [POJ1015]Jury Compromise
题目大意:要求你从n个人中选出m个,每个人有两个值p[i],D[i],要求选出的人p总和与D总和的差值最小.若有相同解,则输出p总+D总最大的方案. 动态规划. 一直在想到底是n枚举外面还是m放外面, ...
- 【Oracle】ORA-00257:archiver error. Connect internal only, until freed 错误的处理方法
archive log 日志已满ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法 1. 用sys用户登录 s ...