<!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. Event Managers

    Some PLF-based controls expose a convenient facility for temporarily disabling their events and for ...

  2. HW6.27

    import java.util.Scanner; import java.util.Arrays; public class Solution { public static void main(S ...

  3. Codeforces Round #225 (Div. 2)

    比赛时候只做出AB,E题一眼看过去似乎线段树能搞,但是写完过不了样例,才发现看错题了,然后比赛就没啥时间了~~整体状况还是很糟糕,A,B题实在出得太慢,然后持续到现在还没出过C题...不能更弱%> ...

  4. hdoj 2099 整除的尾数

    整除的尾数 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  5. PowerDesigner 业务处理模型( BPM )

    PowerDesigner 业务处理模型( BPM ) 说明 properties语言文档xmlvalidation数据库   目录(?)[+]   一.     BPM 简介 业务处理模型(Busi ...

  6. 剑指OFFER之包含min函数的栈（九度OJ1522）

    题目描述: 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 输入: 输入可能包含多个测试样例,输入以EOF结束. 对于每个测试案例,输入的第一行为一个整数n(1<=n&l ...

  7. mysql之存储引擎

    1.存储引擎概念 打比方说:一部电影有mp4,wmv,avi,flv...等格式.同样的一部电影在硬盘上有不同的存储格式,所占的空间与清晰程度也各不一样. 那么我们表里的数据存储在硬盘上,是如何存储的 ...

  8. cocos2dx中android下动态更新.so文件

    作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037595.html  因为没用lua脚本写游戏,所以每次发布出去后,发现在bug,需要 ...

  9. C++多态的实现与局限性

    1.什么是多态? 父类指针指向子类对象,运行时期调用方法的时候,根据方法拥有者的真实类型,确定调用哪个方法. 2.如何实现多态? 要实现多态,需要加一个中间层,暴露父类的方法,内部根据指针的真实类型决 ...

  10. windows 2003 远程登录时如何修改管理员密码

    今天买的vps,需要修改密码.但是自己不会,看网上好多人都说是,按ctrl+alt+del .但是我试过之后发现不对,后来又找到说是使用ctrl+alt+end  更改密码就可以了. 千万不要通过那个 ...