<!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. 搭建 Docker 环境

  2. C/C++(共用体与枚举)

    共用(Union)与枚举(Enum) 共同体 c语言中,不同的成员使用共同的存储区域的数据结构类型称为共用体.(共用,联合体),共用体在定义,说明,适用形式上与结构体相似.两者本质上的不同在于使用内存 ...

  3. 用console.log分析Vue源码

    前言 本文通过console.log的一些特性,结合vue.js的源码,通过一个简单的例子,让你了解Vue的各个过程的变化. 控制台输出的效果图 请用chrome查看,并打开控制台看效果 演示地址 准 ...

  4. 单调栈+贪心维护LIS

    普通:O(\(N^2\)) 状态:dp[j]表示,以j结尾的最长的上升子序列 转移:dp[j]=dp[i]+1(if a[j]>a[i] ) 初始化:dp[i]=1 优化(nlogn) solu ...

  5. windows查看硬件信息系统信息

    rem 查看cpu wmic cpu list briefrem 查看物理内存wmic memphysical list briefrem 查看逻辑内存wmic memlogical list bri ...

  6. Python爬虫之『urlopen』

    本文以爬取百度首页为示例来学习,python版本为python3.6.7,完整代码会在文章末附上 本次学习所用到的python框架:urllib.request 本次学习所用到的函数: urllib. ...

  7. js32---CommonUtil.js

    // BH 命名空间 namespace var BH = {} ; BH.Interface = function(name,methods){ //Interface是类.方法的名字,以后用BH. ...

  8. launcher- 第三方应用图标替换

    有时候我们感觉第三方应用的icon不美观,或者跟我们主题风格不一致,这时候我们希望换成我们想要的icon,那我们可以这么做(以更换QQ应用icon为例): 1.首先我们当然要根据自己的需要做一张替换i ...

  9. IO流学习笔记

    1.File类 文件和目录路径名的抽象表示形式. 4种构造方法 File(File parent, String child) File(File parent, String child) File ...

  10. eclipse创建maven

    第一步: 第二步 第三步: 第四步: 第五步: 第六步: <?xml version="1.0" encoding="UTF-8"?> <we ...