1.先做一个可以覆盖整个屏幕的div,颜色为黑色,然后再设置透明度,作为遮罩
#zhezhao {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.1;//以下三项是各种浏览器的透明度,可进行更改
filter: alpha(opacity=10);
-moz-opacity: 0.1;
display: none;//一上来默认是隐藏的,通过js事件进行显示隐藏
z-index:;//遮罩要高于所有的,给他设置一个大一点的值,但是如果弹窗遮罩,弹窗要高于遮罩,把弹窗的z-index属性设置大于遮罩即可
}
2.在JQuery事件中设置遮罩的显示与隐藏
$(document).ready(function () {
$("#btn1").click(function () {
var hig_body = $('body').outerHeight();//获取body的高度
var hig_ex = window.innerHeight;//获取浏览器高度
if (hig_body < hig_ex) {
hig_body = hig_ex;
}
$("#zhezhao").css('display', 'block').css('height',hig_body);

jQuery 屏幕遮罩的更多相关文章

  1. 简单的用jQuery做遮罩效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. jQuery实现遮罩层

    1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...

  3. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. jquery 半透明遮罩效果 小结

    最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...

  5. jquery blockui 遮罩

    参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...

  6. Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

  7. jquery动画遮罩

    以前一直以为遮罩都是鼠标移上去,改变透明度实现的,后来看到过这样的一个遮罩动画,然后今天自己写了一个,因为弹出的遮罩是圆形的,所以从美观上来说,这个遮罩效果更适合于方形图片. <div clas ...

  8. jquery blockui 遮罩【转】

    参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...

  9. [Unity3D]Shader编程之动态屏幕遮罩

    转载 https://blog.csdn.net/u012741077/article/details/78425834 屏幕可视范围跟随目标物体移动,可修改可视范围大小,边缘渐变大小.以及遮罩颜色, ...

随机推荐

  1. js中获得指定范围的n个不重复的随机数

    function getarray(arr,num){ //复制数组,不能直接在原数组上修改 var temparr=new Array(); //遍历原数组 for(var i in arr){ / ...

  2. 2009年到2013年甲子园ED

    2009年 2010年  最喜欢的一个!看过N遍 2011年 也不错! 2012年  超级好听啊~^_^比10年的还好,看过N+1遍……o(╯□╰)o 2013年春季甲子园 2013年夏季 印象最深的 ...

  3. 在Linux系统中如何设置APACHE服务器里的后台页面只允许某个IP地址访问

    补充资料 本网络中使用LINUX服务器,web服务器是由APACHE搭建,IP地址为192.168.1.5,后台页面为/admin/login.jsp . 如何设置后台页面LOGIN.JSP只允许19 ...

  4. ArcGIS+API+for+JS测距

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. IE中Keep-Alive机制引起的错误

    我们知道Http协议是基于TCP/IP连接的,也就是说客户端浏览器向服务器发出一个Http请求并得到响应是要建立一条TCP/IP连接的,但是如果每发出一个Http请求客户端就要向服务器端建立一条TCP ...

  6. CentOS6.8 MySQL 5.6实现主从复制

    主库操作 1.将mysqldump命令添加到/usr/bin中 ln -s /application/mysql/bin/mysqldump /usr/bin/ 2.开启master上的log-bin ...

  7. OneNote 2013 快捷键

    越来越喜欢onenote这个笔记本软件,找了下提高效率的办法,收藏学习下: 转载自:http://onenoter.com/2013/04/5792 记录笔记和设置笔记格式 键入和编辑笔记 操作 按键 ...

  8. Git+Github代码管理控制

    关于Git的发展历程这里就不多介绍了,有兴趣的话可以查阅一下Git的相关历程. 如果你在做的项目或者自己写的一些项目由于需要用的分布式.或者团队开发.再或者你不善于对代码进行定期备份,但又希望自己的代 ...

  9. 【MySQL】InnoDB日志机制深入分析

    版权声明:尊重博主劳动成果,欢迎转载,转载请注明出处 --爱技术的华仔 Log & Checkpoint Innodb的事务日志是指Redo log,简称Log,保存在日志文件ib_logfi ...

  10. access remote libvirtd

    访问远程libvirtd服务因为是在一个可信环境中运行,所以可以忽略安全方面的操作,步骤如下:(1)更改libvirtd配置    1.1 更改/ect/sysconfig/libvirtd文件,打开 ...