<!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. 错误日志写入到本地磁盘（lock 队列）

    今天照常在b站上看看编程:看到有讲错误日志处理的,自己没写过日志,就看看了看: 主要是在讲的时候牵扯到了队列和lock的知识点:这方面知识自己了解的更少,那就记录一下.

  2. Oracle学习总结（8）—— 面向程序员的数据库访问性能优化法则

    特别说明: 1.  本文只是面对数据库应用开发的程序员,不适合专业DBA,DBA在数据库性能优化方面需要了解更多的知识: 2.  本文许多示例及概念是基于Oracle数据库描述,对于其它关系型数据库也 ...

  3. Hyperic

    https://my.oschina.net/hyperichq/blog/525590

  4. 洛谷——P1314 聪明的质监员

    https://www.luogu.org/problem/show?pid=1314 题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每 ...

  5. Pig源代码分析: 简析运行计划的生成

    摘要 本文通过跟代码的方式,分析从输入一批Pig-latin到输出物理运行计划(与launcher引擎有关,通常是MR运行计划.也能够是Spark RDD的运行算子)的总体流程. 不会详细涉及AST怎 ...

  6. HDU 3072--Intelligence System【SCC缩点新构图 &amp;&amp; 求连通全部SCC的最小费用】

    Intelligence System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  7. elasticsearch java 客户端之action简介

    上一篇介绍了elasticsearch的client结构,client只是一个门面,在每个方法后面都有一个action来承接相应的功能.但是action也并非是真正的功能实现者,它只是一个代理,它的真 ...

  8. jQuery高级选择器和其等价方法

    jQuery选择器和css一样,但兼容性更好 <body> <p>p1</p> <p>p1</p> <p>p1</p> ...

  9. 基于TC技术的网络流量控制实战

    本文转载在:http://server.it168.com/a2010/0426/878/000000878406.shtml 基于TC技术的网络流量控制实战 650) this.width=650; ...

  10. Android 使用AIDL实现进程间的通信

    在Android中,如果我们需要在不同进程间实现通信,就需要用到AIDL技术去完成. AIDL(android Interface Definition Language)是一种接口定义语言,编译器通 ...