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

 <html xmlns="http://www.w3.org/1999/xhtml">

<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

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. BestCoder Round #68 (div.2) 1002 tree

    题意:给你一个图,每条边权值0或1,问每个点周围最近的点有多少个? 思路:并查集找权值为0的点构成的连通块. #include<stdio.h> #include<string.h& ...

  2. 我用的Linux命令

    从今天起,会在这里记一些我使用过的linux命令 =======I'm 分割线======= 11.查看某个端口号被哪个应用占用 netstat -apn|grep 端口号,lsof -i:端口号,n ...

  3. [Objective-c 基础 - 2.9] 类的本质

    A.概念 类对象:类也是一个对象,是Class类型的对象 实例对象:创建的对象,有一个isa指针指向类   B.操作 获取内存中的内对象 1. 使用实例对象获取 Class c = [p class] ...

  4. C++中实现从std::string类型到bool型的转换

    利用输入字符串流:std::istringstream bool b; std::string s = "true"; std::istringstream(s) >> ...

  5. IE下使用ADODB.Stream实现断点续传

    最近研究了一下IE自带的一些Activex控件,可以比较简单的实现断点续传功能 不过这种方式不推荐,因为安全性较低,而且需要修改客户端注册表,调低ie安全配置 还有就是我比较懒,只打算写个思路和几个关 ...

  6. cocos2d-x c++和object-c内存管理比较

    转自:http://www.2cto.com/kf/201307/227142.html 既然选择了C++作为游戏开发的语言, 手动的管理内存是难以避免的, 而Cocos2d-x的仿Objctive- ...

  7. 理解virtual方法

    1.使用场景 virtual方法的使用场景:父类告诉子类,继承接口,修改实现,从而可以面向接口编程. non-virtual方法的使用场景:父类告诉子类,继承接口和实现,从而可以代码复用. 2.成员方 ...

  8. 关于Excel Networkdays方法的实现

    最近一个程序要求excel输出的日期差为Networkdays. 在网上找了下,没有找到很好的具体实现方法. 要说明的是,微软的Microsoft.Office.Interop.Excel已经实现的N ...

  9. [置顶] ORACLE分析函数（1）

    分析函数式ORACLE提供的用来进行数据统计的强有力工具,与我们常用的聚合函数具有一些相似性,但又完全不同.聚合函数,首先会将数据进行分组,然后对每一组数据进行运算,如求和sum,求平均AVG等,对于 ...

  10. 【ALearning】第三章 Android基本常见控件

    本章主要介绍主要的寻常较多使用的控件,包含TextView.EditView.ImageView.Button等.本章将介绍相关控件基本属性的使用,为以后章节的进阶学习提供基础.案例中引用的Linea ...