<!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. Python读取文件内容的三种方式并比较

    本次实验的文件是一个60M的文件,共计392660行内容. 程序一: def one(): start = time.clock() fo = open(file,'r') fc = fo.readl ...

  2. HW6.1

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  3. hdu4612-Warm up（边的双连通分量）

    题意:有n个点,m条边,有重边.现在可以任意在图上添加一条边,求桥的最少数目. 题解:思路就是求出双连通分量之后缩点成为一棵树,然后求出树的直径,连接树的直径就能减少最多的桥. 难点在于:有!重!边! ...

  4. EasyBCD安装CentOS双系统

    之前使用CentOS安装过ubuntu,今天安装一次CentOS6.6,要复杂一些,列文备忘. 1.安装EasyBCD,下载CentOS-6.6-x86_64-bin-DVD1.iso.CentOS- ...

  5. [iOS基础控件 - 6.8] 各种数据类型的@property属性

    A.内存管理 NSString: copy 基本数据类型.结构体(int, CGFloat, BOOL, CGRect等):assign 对象(如自定义model类型.NSArray.NSDictio ...

  6. Android 命名规范和编码规范

    简明概要  多写注释 一.关于命名规范 对于开发项目来说肯定是要有统一的规范,然而命名规范需要做到哪几点呢? 答: 首先,不能反人类. 再来就是,要望文而知其意. 下面就来说说具体该怎么去规范我们的代 ...

  7. SQL Server 重新恢复自动编号列的序号

    1. truncate table tablename2. DBCC CHECKIDENT (tablename,reseed,1)   truncate命令不但会清除所有的数据,还会将IDENTIT ...

  8. 02---CSS整理

    一.概述       CSS(cascading style sheet) 层叠样式表       提供比HTML更强大的页面排版.美化工具       CSS将网页内容和显示样式进行分离,提高了显示 ...

  9. select poll使用

    select poll使用     2.1. 怎样管理多个连接?“我想同一时候监控一个以上的文件描写叙述符(fd)/连接(connection)/流(stream),应该怎么办?” 使用 select ...

  10. Python 魔术方法指南

    入门 构造和初始化 构造定制类 用于比较的魔术方法 用于数值处理的魔术方法 表现你的类 控制属性访问 创建定制序列 反射 可以调用的对象 会话管理器 创建描述器对象 持久化对象 总结 附录 介绍 此教 ...