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 ...
随机推荐
- 硬盘格式是MBR、GPT
装win7 64位要求硬盘格式是MBR 现在预装 Win8 的电脑大多是采用新版 UEFI 固件 + GPT 格式磁盘 GPT模式是针对整个硬盘的初始化而言,因此不存在某一个分区是GPT模式的说法.转 ...
- 转一篇dudu大人的文章:程序员,用NuGet管理好你的包包
每个女人都有很多包包:其实男人也有,但只有会写程序的男人才有 —— 代码世界中的大“包”小“包”.这些大包小包,有花钱买的,有从开源市场淘的,也有自己或同事亲手制作的. 包包有个特点:容易坏,更新快, ...
- LeetCode——Reverse Integer(逆置一个整数)
问题: Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return –321 Ha ...
- Linux---从start_kernel到init进程启动
“平安的祝福 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ” ini ...
- 【POI word】使用POI实现对Word的读取以及生成
项目结构如下: 那第一部分:先是读取Word文档 package com.it.WordTest; import java.io.FileInputStream; import java.io.Fil ...
- 在Windows下快速搭建SVN服务器 VisualSVN
下载https://www.visualsvn.com/server/download/ 1.安装 安装SVN服务器: 安装的时候可以选择http协议还是https协议,http协议速度快一些,而ht ...
- json入门(二)
背景 之前最早的时候,也见过类似于这样的字符串: {"list":[ {"ArticleId":7392749,"BlogId&q ...
- Y86模拟器安装
Y86模拟器安装 这周需要学习Y86下的指令集开发,Y86和x86可以说是孪生兄弟,但是还是存在着一些小的差别.接下来介绍如何进行linux-debian平台下的Y86模拟器安装. 虚拟机VMware ...
- css3 -- 媒体查询
媒体查询: 1.媒体查询优点:基于设备的属性检测设备,这样一来就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表,也就是说检测用户使用小屏幕的设备,css规则就会调整以适应该屏幕的 ...
- [bzoj3224]普通平衡树/3223文艺平衡树
这是一道很普通的题.. 最近花了很多时间来想要去干什么,感觉自己还是太拿衣服 做这道题是因为偶尔看到了lavender的blog和她的bzoj早期AC记录,就被题目深深地吸引到了,原因有二: 自己sp ...