<!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. Android 通过OnScrollListener来监听RecyclerView的位置

    最近做一个漫画app,在阅读漫画界面需要通过获取recyclerView的位置来实时更新界面上的图片进度(比如1/9), 查阅资料得知了可以通过LayoutManager来获取recyclerView ...

  2. the night the room

    http://bogifabian.com/?page_id=2529 I am trying to creat dreamful atmospheres, paint walls and floor ...

  3. 03008_使用JDBC对分类表进行增删改查操作

    1.创建数据库分类表 #创建数据库 create database mybase; #使用数据库 use dmybase; ###创建分类表 create table sort( sid int PR ...

  4. 【t038】&&【u214】金字塔

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 小X来到一个雄奇的金字塔挖宝,但是这是一座被诅咒的金字塔,小X必须马上逃离这里,否则小X就会被埋在金字 ...

  5. linux常用命令之lsof 、netstat、ipcs、ldd

    一.lsof lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.每行 ...

  6. bitset也挺好用的

    http://www.cplusplus.com/reference/bitset/bitset/bitset/ std::bitset<16> foo; std::bitset<4 ...

  7. View_01_LayoutInflater的原理、使用方法

    View_01_LayoutInflater的原理.使用方法 本篇博客是郭神博客Android视图状态及重绘流程分析,带你一步步深入了解View(一)的读书笔记的笔记. LayoutInflater简 ...

  8. Button- 自定义控件添加自定义属性

    今天自定义了一个button按钮,需要添加一个属性,具体步骤如下 1.新属性的信息设定:在values目录下添加attrs.xml文件,在里面添加属性信息 <?xml version=" ...

  9. 升级你的Linux日志系统

    650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...

  10. Linux启动过程总结

    当我们按开机键后,主机就会执行: 1.POST(Power-On Self Test 加电自检). 2.读取BIOS中定义的开机设备启动程序,并加载MBR(主引导记录(Master Boot Reco ...