遮罩效果

<!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. kaggle之电影评论文本情感分类

    电影文本情感分类 Github地址 Kaggle地址 这个任务主要是对电影评论文本进行情感分类,主要分为正面评论和负面评论,所以是一个二分类问题,二分类模型我们可以选取一些常见的模型比如贝叶斯.逻辑回 ...

  2. 数据库学习之ADO.NET五大对象

    1 [ADO.NET]      ado.net 是一种数据访问技术,使得应用程序能够连接到数据存储,并以各种方式操作存储在里面的数据.    2 [ADO.NET五大常用对象]     Connec ...

  3. Android项目能运行，上传svn后再下载却不能运行

    今天遇到一个比较奇怪的问题,android项目上传到svn之前,可以运行,但是上传到svn后再check, 就出错. 搜索了一下,发现真的解决了问题. svn 不知道是出于什么原因,不能上传.so文件 ...

  4. xmanager 在 Windows 下远程桌面连接 麒麟

    编辑/etc/gdm/custom.conf,添加如下内容: [daemon] RemoteGreeter=/usr/libexec/gdmgreeter  注:“远程登录界面与本地登录界面相同”功能 ...

  5. 沃通tomcat jks 安装配置

    废话不多说上代码: <Connector port="443" protocol="org.apache.coyote.http11.Http11NioProtoc ...

  6. iOS开发面试题整理 （一）

    1. Object-C有多继承吗?没有的话用什么代替? cocoa 中所有的类都是NSObject 的子类多继承在这里是用protocol 委托代理 来实现的 你不用去考虑繁琐的多继承 ,虚基类的概念 ...

  7. USACO OPEN 12 BOOKSELF（转）

    原文出处:http://txhwind.blog.163.com/blog/static/2035241792012112285146817/(版权为原作者所有,本博文无营利目的,不构成侵权) 题目大 ...

  8. C++ 开源库

    1.C++各大有名库的介绍——C++标准库 2.C++各大有名库的介绍——准标准库Boost 3.C++各大有名库的介绍——GUI 4.C++各大有名库的介绍——网络通信 5.C++各大有名库的介绍— ...

  9. Ubuntu14.04右键菜单添加Sublime 2打开选项

    序 Ubuntu上安装Sublime的时候直接下载的压缩包(软件中心里没有找到Sublime),于是每次想用Sublime打开一个文件的时候就得先打开Sublime然后从File -> Open ...

  10. 模块化开发之sea.js实现原理总结

    seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签 引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实 ...