<!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. SpringMVC的注解方式

    mvc-servlet.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&qu ...

  2. Gym 100952 B. New Job

    B. New Job time limit per test 1 second memory limit per test 64 megabytes input standard input outp ...

  3. C/C++(基础编码-补码详解）

    两个数的交换 1.引入第三者. 2.求和运算,求差.(这样会产生内存溢出) 3.异或运算 a = a^b; b = a^b; a = a^b; 8b(bit位) = 1B(Byte=字节)//最小单位 ...

  4. ajax的内容

    ajax是什么? 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新,可以局部刷新而不必整个页面整体刷新. url的简单认识: 进入服务器的三种方式: 1.localhost:端口号 ...

  5. NYOJ_75 日期计算 (推断这一天是这一年中的第几天)

    题目地址 如题,输入一个日期,格式如:2010 10 24 ,推断这一天是这一年中的第几天. 分析:   官方给的最优答案用了for 和switch语句结合,十分巧妙. 代码 /* 如题,输入一个日期 ...

  6. softInputMode- 软件盘的设置

    今天遇到一个问题,就是软件盘弹出来以后,会把之前的布局界面整个的挤到屏幕的外面,而且按下返回建以后,这个软件盘占据的空间会留下一个黑色的背景.在网上查找了很多的方法,刚开始都是说,如下方法 <a ...

  7. PHP中字符串比较的常用方法

    PHP中字符串比较的常用方法 一.总结 1.其实应该是直接等于号就可以了的 2.也可用strcmp,注意返回值 二.PHP中字符串比较的常用方法 1.按字节比较 按字节比较字符串是最常用的方法.其中可 ...

  8. 轻松学习Linux之用户账户管理及实例

    Linux用户管理基础 (下载清晰视频:http://down.51cto.com/data/158699) 轻松学习Linux之用户账户管理的实例-跨硬盘移动数据 (此处视频不清楚下按下面地址下载清 ...

  9. 数据库SQL Server2012笔记（七）——java 程序操作sql server

    1.crud(增删改查)介绍:create/retrieve/update/delete 2.JDBC介绍 1)JDBC(java database connectivity,java数据库连接) 2 ...

  10. android-5.1编译配置（van）

    必备文件: archives1211.tgz ubuntu_install_1204.tgz 安装指引: ubuntu_install_1204/readme.txt 工作目录结构: git ├── ...