<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>

		<title></title>

	</head>

	<body>

		<button onclick="coverDiv()">显示</button>

	</body>

	<script type="text/javascript">

	//显示遮罩

	function coverDiv(){

        var procbg = document.createElement("div"); //首先创建一个div

        procbg.setAttribute("id","mybg"); //定义该div的id

        procbg.style.background = "#000000";

        procbg.style.width = "100%";

        procbg.style.height = "100%";

        procbg.style.position = "fixed";

        procbg.style.top = "0";

        procbg.style.left = "0";

        procbg.style.zIndex = "500";

        procbg.style.opacity = "0.6";

        procbg.style.filter = "Alpha(opacity=70)";

        document.body.appendChild(procbg);

    }

    //取消遮罩

    function hide() {

        var body = document.getElementsByTagName("body");

        var mybg = document.getElementById("mybg");

        body[0].removeChild(mybg);

    }

    /* 解释：实现的方式非常easy，就是动态创建一个div，

     * 设置的背景颜色等等，假设你是弹出一个框框，

     * 而且在框没有关闭之前是不能操作父级的元素中的，

     * 那么你就能够让你的框和这个遮罩div同一时候显示，

     * 而仅仅须要设置他们的z-index样式，来选择谁在

     * 上在下的顺序，就能够啦。

     * 欢迎增加Java交流群：398918539

     */

	</script>

</html>

js+html实现遮罩层效果（收藏哦）的更多相关文章

  1. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  2. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  3. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  4. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  5. js 实现弹出层效果

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  6. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  7. JS实现弹出层效果

    很多时候我们想去某某网站干点什么的时候,就会让我们先注册登录后才可以访问内容,而现在很多网站注册登录的时候都会有一种遮罩层的效果,就是背景是带有透明度的黑色遮罩,盖满整个网站,然后登录框弹出固定在屏幕 ...

  8. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  9. js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...

随机推荐

  1. Onvif开发之客户端鉴权获取参数篇

    前面一篇已经介绍了客户端如何发些设备,下面这篇简单介绍下在发现设备后,如何通过ONVIF协议来获取设备的相关参数 ONVIF中不管是客户端还是设备端,最先实现的接口都是关于能力的那个接口,在客户端实现 ...

  2. #学习笔记#——JavaScript 数组部分编程（四）

    7.合并数组 arr1 和数组 arr2.不要直接修改数组 arr,结果返回新的数组 function concat(arr1, arr2) { return arr1.concat(arr2); } ...

  3. Kinect 开发 —— 面部追踪

    SDK1.5中新增了人脸识别类库:Microsoft.Kinect.Toolkit.FaceTracking使得在Kinect中进行人脸识别变得简单,该类库的源代码也在Developer Toolki ...

  4. Ubuntu+PyQt5+Python3.6+Qt Designer 实现可视化窗口的编辑

    一.为什么写这片博文 近期将实验室的电脑的OS换成了ubuntu,想对linux进一步的了解和使用.在使用的过程中想用python+pyqt5写一个音乐播放器和视频播放器(这也是linux的乐趣所在) ...

  5. unalias---取消命令别名

    unalias命令用来取消命令别名,是为shell内建命令. 选项 -a:取消所有命令别名. 实例 使用unalias命令将已经设置的命令别名"cc"取消,输入如下命令: unal ...

  6. 洛谷 P2105 K皇后

    P2105 K皇后 题目描述 小Z最近捡到了一个棋盘,他想在棋盘上摆放K个皇后.他想知道在他摆完这K个皇后之后,棋盘上还有多少了格子是不会被攻击到的. (Ps:一个皇后会攻击到这个皇后所在的那一行,那 ...

  7. JQuery之为某个div加入行样式

    JQuery都是以$符号开头的.当然能够用jQuery取代$符号,他们是恒等的,同一时候也是相等的.()事实上就是一个方法,里面能够传递匿名函数等,选取某个div时,如id为div1则用$('#div ...

  8. iOS动画之模拟音量振动条

    音量振动条 效果图: 假设实现? 创建3个layer.按顺序播放y轴缩放动画 利用CAReplicatorLayer实现 1.什么是CAReplicatorLayer? 一种能够复制自己子层的laye ...

  9. 37.Intellij IDEA解决GBK乱码

    转自:https://blog.csdn.net/myspacedemen/article/details/38401047 今天尝鲜装完Intellij IDEA以后,打开一个GBK编码的页面,华丽 ...

  10. eclipse中修改了代码编译后执行不起作用

    在网上试了好多方法都没解决 后来,删了eclipse里的服务器,重新创建了一下,重新运行自己的工程发现修改的代码起作用了.