遮罩效果

<!DOCTYPE html>

 <html>

<head>

<title>DIV CSS遮罩层</title>

<script language="javascript" type="text/javascript">

function showdiv() {

            document.getElementById("bg").style.display ="block";

            document.getElementById("show").style.display ="block";

        }

function hidediv() {

            document.getElementById("bg").style.display ='none';

            document.getElementById("show").style.display ='none';

        }

</script>

<style type="text/css">

        #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}

        #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}

</style>

</head>

<body>

<input id="btnshow" type="button" value="Show" onclick="showdiv();"/>

<div id="bg"></div>    <!-- 遮罩层  -->

<div id="show">测试

    <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>

</div>

</body>

</html>

Copy上面的代码到HTML页面即可查看效果。

原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display='block' or display='none'.就可以实现DIV的显示和隐藏。

注意两个DIV的z-index，显示在最上面的DIV的z-index一定要比遮罩层的z-index大。

[转] http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html

ps:http://www.ituring.com.cn/article/68352    遮罩可能会遇到的问题

Html遮罩效果的更多相关文章

  1. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  2. 【原】使用Xfermode正确的绘制出遮罩效果

    以前写as3的时候,遮罩效果一个mask属性就搞定了,真是方便. 转到android上以后,发现要实现类似的效果,可以使用Xfermode,android一共提供了三种: AvoidXfermode; ...

  3. ext.ajax.request请求时带有遮罩效果

    ajax请求时有时需要操作大量的数据,反应有时会很慢,这时我们想要来一个遮罩效果,具体步骤如下 1.定义一个遮罩 var myMask = new Ext.LoadMask(Ext.getBody() ...

  4. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  5. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  6. 扩展easyUI tab控件，添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  7. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  8. IOS开发UI篇--使用CAShapeLayer实现复杂的View的遮罩效果

    一.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发送者.服务端返回给我们的图片只是一张矩形的图片,我们如何把一张矩形的图片或者View,加上一层自定 ...

  9. 【Android】Activity遮罩效果的实现

    Activity文件 package com.app.test02; import android.app.Activity; import android.graphics.Color; impor ...

随机推荐

  1. Vlc基础数据结构记录

    1．  Vlc基础数据结构 hongxianzhao@hotmail.com 1.1  基础数据结构 struct vlc_object_t,相关文件为src\misc\objects.c. 定义为: ...

  2. [转载]android中The connection to adb is down，问题和解决

    原网址:http://blog.sina.com.cn/s/blog_5fc93373010164p3.html 今天我出现了第3个错误,于是百度了一下.感觉这篇博客对我挺有帮助,推荐给大家.以下是原 ...

  3. override和new的区别

    override 1. override是派生类用来重写基类中方法的: 2. override不能重写非虚方法和静态方法: 3. override只能重写用virtual.abstract.overr ...

  4. JavaScript事件属性绑定带参数的函数

    JavaScript中在对事件进行绑定的时候,往往是element.onclick=event;这种形式,这样使用的话则会出现无法传参数.因此我们可以使用function(){}匿名函数将事件包含其中 ...

  5. @Override报错的解决方法

    有时候Java的Eclipse工程换一台电脑后编译总是@override报错,把@override去掉就好了,但不能从根本上解决问题,因为有时候有@override的地方超级多. 这是jdk的问题,@ ...

  6. Intent七在属性之一:ComponentName

    注:在<疯狂android讲义>中,此属性称为Component,官方文档中称为ComponentName. 1.The name of the component that should ...

  7. AJAX验证数据库内容并显示在页面

    功能实现: 在jsp页面中填写文本框内容,光标离开文本框,在本页面的相应地方获取数据库中改值所对应的其他数据. servlet: request.setCharacterEncoding(" ...

  8. 变态最大值（nyoj）

    变态最大值 描述 Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这么烂,幸好在他的帮助下大家算是解决了这个问题,但是问题又来了. 他想在一组数中找一个数,这个数可以不是这组数 ...

  9. UVA 12563 Jin Ge Jin Qu hao

    dp-背包 开始用普通dp写了一发发现没法确定最大时间... 后来看到大牛机智的写法,嗯...dp表示当前状态能否成立:然后从条件最好的状态开始遍历,直到这个状态成立然后退出遍历. 具体的看代码吧.. ...

  10. OpenWRT交叉编译

    对于当前不在OpenWRT repository中的软件,如果是用源码形式发布的,那么可以用OpenWRT Buildroot进行交叉编译. 首先编译好Buildroot(一般编译过一次固件,就已经编 ...