1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>DIV CSS遮罩层</title>
  5. <script language="javascript" type="text/javascript">
  6. function showdiv() {
  7.             document.getElementById("bg").style.display ="block";
  8.             document.getElementById("show").style.display ="block";
  9.         }
  10. function hidediv() {
  11.             document.getElementById("bg").style.display ='none';
  12.             document.getElementById("show").style.display ='none';
  13.         }
  14. </script>
  15. <style type="text/css">
  16.         #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);}
  17.         #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;}
  18. </style>
  19. </head>
  20. <body>
  21. <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
  22. <div id="bg"></div>
  23. <div id="show">测试
  24. <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
  25. </div>
  26. </body>
  27. </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

JS+CSS简单实现DIV遮罩层显示隐藏【转藏】的更多相关文章

  1. JS+CSS简单实现DIV遮罩层显示隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  3. jquery实现div遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  5. js根据鼠标方向划入遮罩层

    js根据鼠标方向划入遮罩层: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. 简单实现div遮罩

    顾名思义,div遮罩就是将网页上的一部分用div遮盖起来,防止用户误点,因此div遮罩的一个用途就是将table设置为不可编辑. 作者通过查找资料,并进行简单的测试,最终完成了以下几段简单代码,来实现 ...

  7. div 遮罩层 弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  9. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

随机推荐

  1. POJ-3744 Scout YYF I 概率DP

    题目链接:http://poj.org/problem?id=3744 简单的概率DP,分段处理,遇到mine特殊处理.f[i]=f[i-1]*p+f[i-2]*(1-p),i!=w+1,w为mine ...

  2. 牛一网ecshop综合类模板(仿淘常州) for ecshop 2.7.3

    牛一网目前已经开发好这款ecshop综合类/多色系模板,已经开发好多种色系,本模板将会搭配多种颜色让用户选择,以适应 家电数码. 个护化妆. 生鲜水果 . 服饰鞋帽 . 图书音像 . 粮油食品.家具家 ...

  3. HDU2177：取(2堆)石子游戏(威佐夫博弈)

    Problem Description 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同 ...

  4. PowerDesigner概念数据模型 CDM

    目标:本文主要介绍PowerDesigner中概念数据模型 CDM的基本概念. 一.概念数据模型概述数据模型是现实世界中数据特征的抽象.数据模型应该满足三个方面的要求:1)能够比较真实地模拟现实世界2 ...

  5. iOS 转让APP

    今天需要将一个客户的app转让到它公司的个人账号上,记录下来流程,给有需要的人方便查看. 上面这个是咨询了苹果的客户之后收到的邮件说明,有需要的大家自己仔细看看. 好了,进入正题: 一:转出方操作 1 ...

  6. 流弊博客集锦(updating)

    1.http://ifeve.com/ 2.淘宝的 code project http://code.taobao.org/ http://blog.csdn.net/tenfyguo/article ...

  7. XMIND

    XMind 是一款非常实用的商业思维导图软件,应用全球最先进的Eclipse RCP 软件架构,全力打造易用.高效的可视化思维软件,强调软件的可扩展.跨平台.稳定性和性能,致力于使用先进的软件技术帮助 ...

  8. [Java 7][msvcr100.dll] Error when load Eclipse

    [Problem] After I updated to Java 7, I could not load Eclipse. Here comes the erros: Eclipse: eclips ...

  9. cocos2d-x 开发时的注意点

    转自:http://cjhworld.blog.163.com/blog/static/20707803620132693629307/ 1.       按照Cocos2d的编程风格,尽量少用构造函 ...

  10. 详解Android ActionBar之二：ActionBar添加Tabs标签和下拉导航

    本节主要讲解ActionBar如何添加Tabs标签和下拉导航. 一.添加标签 Tabs 在ActionBar中实现标签页可以实现android.app.ActionBar.TabListener ,重 ...