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. linux和window下mkdir函数问题(转-锦曦月)

    通过WIN32宏进行判断   window下mkdir函数   #include<direct.h> int _mkdir( const char *dirname );   linux下 ...

  2. HDU-2778 DNA Sequence(AC自动机)

    题目大意:统计模式串出现的次数. 题目分析:模板题. 代码如下: # include<iostream> # include<cstdio> # include<queu ...

  3. truncate有外键约束的表,报ORA-02266处理。

    问题描述:当父表有子表的外键约束时,无法直接truncate父表.报ORA-02266: unique/primary keys in table referenced by enabled fore ...

  4. input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色

    填写form表单时发现chrome的一个好坑啊! 当你之前有填写过表单,获取焦点时,input会有一个记录之前填写过的文本的下拉列表式的东东,就像这样:(抱歉丑了点,隐私问题打上了马赛克) 按理说,这 ...

  5. Kafka安装及部署

    安装及部署 一.环境配置 操作系统:Cent OS 7 Kafka版本:0.9.0.0 Kafka官网下载:请点击 JDK版本:1.7.0_51 SSH Secure Shell版本:XShell 5 ...

  6. IOS框架研究之SDWebImage的原理以及使用流程

    SDWebImage 这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. SDWebImage 支持异步的图片下载+ ...

  7. ubuntu下设置clion是使用clang和clang++

    链接 http://stackoverflow.com/questions/31725681/how-to-setup-clion-with-portable-clang-on-ubuntu I go ...

  8. C# IO

    在.NET框架中进行的所有IO操作都要用到流(Stream). System.IO命名空间中包含许多IO相关的类,C#文件读写的类几乎都在其中,下面对其进行详细介绍. 主要类列表: 类 说明 Bina ...

  9. cocoapod 安装

    淘宝镜像: sudo gem sources -a https://ruby.taobao.org/ sudo gem sources --remove https://rubygems.org/ 安 ...

  10. EntityFramework基础

    好久没有学习新东西了,最近研究了下EntityFramework,将基础代码贴出来, Entity Framework 利用了抽象化数据结构的方式,将每个数据库对象都转换成应用程序对象 (entity ...