遮罩效果

<!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. 解决在Linux下安装Oracle时的中文乱码问题

    本帖最后由 TsengYia 于 2012-2-22 17:06 编辑 解决在Linux下安装Oracle时的中文乱码问题 操作系统:Red Hat Enterprise Linux 6.1数据库:O ...

  2. 反射操作辅助类ReflectionUtil

    这篇文章的目的是介绍这样一种方式,就是在写一个函数的时候,传递的参数是object类型的,在这个函数里面想访问这个参数对象的某一属性值,我们知道这个属性值的name,但是一般情况下,object对象是 ...

  3. ARCGIS接口详细说明

    ArcGIS接口详细说明 目录 ArcGIS接口详细说明... 1 1.      IField接口(esriGeoDatabase)... 2 2.      IFieldEdit接口(esriGe ...

  4. 在美国公司架构中，LLC、LLP 和 Corporation 的区别何在？

    这个问题,首先需要弄清楚这样一个事实:LLC.LLP.Corporation分别属于三种不同类型的公司实体. 1,LLC (Limited Liability Company)是责任有限公司: 2,L ...

  5. Convert Sorted List to Binary Search Tree java

    public TreeNode sortedListToBST(ListNode head) { if(head==null) return new TreeNode(0); ArrayList< ...

  6. 给小班讲stl 之 map、sort、优先队列

    引子:最近老师让给小班讲课,讲stl,,但是我觉得就小班现在这水平根本讲不懂好不好,,,,

  7. PHP环境搭配

    电脑上如果有apache,必须先卸载了先,如果有集成的环境,类似于apmserver,也必须先停止先.不然安装的时候,会出现修复和卸载选项,而不是典型安装跟用户自定义安装. apache安装目录 E: ...

  8. 解决Java调用Azure SDK证书错误javax.net.ssl.SSLHandshakeException

    Azure作为微软的公有云平台,提供了非常丰富的SDK和API让开发人员可以非常方便的调用的各项服务,目前除了自家的.NET, Java, Python, nodeJS, Ruby,PHP等语言都提供 ...

  9. Nginx 配置指令的执行顺序（一）

    大多数 Nginx 新手都会频繁遇到这样一个困惑,那就是当同一个 location 配置块使用了多个 Nginx 模块的配置指令时,这些指令的执行顺序很可能会跟它们的书写顺序大相径庭.于是许多人选择了 ...

  10. __declspec(dllimport)的作用

    是时候总结一下__declspec(dllimport)的作用了.可能有人会问:__declspec(dllimport)和__declspec(dllexport)是一对的,在动态链接库中__dec ...