<!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=40);}
        #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>
 dsfasdfasd
 sdfsdfsfa<br/>
 sdfasdfs
</body>
</html>

简单div遮罩的更多相关文章

  1. 简单实现div遮罩

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

  2. layer遮罩层 简单的遮罩层

    在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...

  3. jquery实现div遮罩层

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

  4. div 遮罩层 弹窗

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

  5. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

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

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

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

  7. 简单的遮罩层效果，user登陆显示效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. div 遮罩问题

    css margin(外边距的问题): 遮罩问题:当移动一个大盒子里面的子元素的时候他的父级也会随着他的移动而移动时:就给他的父级加个透明的边框 叠加问题:当两个盒子在垂直方向移动时,给两个盒子加移动 ...

  9. div遮罩实现禁用鼠标（click、hover等）事件

    这两天在帮老师做网页,今天想实现在一块区域内禁止鼠标的各种事件,本来是想在框架模板的js文件里去修改,但是改代码的时候有点凌乱...感觉应该自己把问题想复杂了. 所以想了想要是能实现在一个区域内(如: ...

随机推荐

  1. java面试宝典第四弹

    动态代理 1. 什么是代理 我们大家都知道微商代理,简单地说就是代替厂家卖商品,厂家“委托”代理为其销售商品.关于微商代理,首先我们从他们那里买东西时通常不知道背后的厂家究竟是谁,也就是说,“委托者” ...

  2. 洛谷 P2846 光开关

    https://www.luogu.org/problemnew/show/P2846 好多题解用线段树来写,然而分块不是更简单好些吗? 一个数组use记录这一块进行了多少次开关操作,两边单独计算,注 ...

  3. a标签中javascript和void

    <body> <a href="javascript:;">点了无反应</a> <a href="javascript:void ...

  4. clock gate

    clock gate 这个专题,比较复杂设计DC  PT PR.下面仅仅从RTL行为级说明一下.

  5. verilog disable 用法 （易错！）

    disable语句可以退出任何循环,能够终止任何begin..end块的执行,用于仿真验证中. 例如 begin:one ;i<;i=i+) begin:two ) disable one; / ...

  6. Perl学习三：运算符

    运算符: 1.operand operator expression statement2.算术运算符 + - * / ** % -字符串参加运算必须转化为整数,若不能转化认为是0. 2.算术比较 & ...

  7. PAT Basic 1040

    1040 有几个PAT 字符串APPAPT中包含了两个单词“PAT”,其中第一个PAT是第2位(P),第4位(A),第6位(T):第二个PAT是第3位(P),第4位(A),第6位(T). 现给定字符串 ...

  8. Impala Catalog Server StateStore 端口被占 无法启动问题

    最新版的Impala时候关闭的时候无法关闭 Catalog Server和StateStore后台进程,导致错误如下: --max_log_size= --minloglevel= --stderrt ...

  9. 算法学习记录-图——最小生成树之Kruskal算法

    之前的Prim算法是基于顶点查找的算法,而Kruskal则是从边入手. 通俗的讲:就是希望通过 边的权值大小 来寻找最小生成树.(所有的边称为边集合,最小生成树形成的过程中的顶点集合称为W) 选取边集 ...

  10. jQuery DOM 互转

    jQuery对象与DOM对象是不一样的 通过一个简单的例子,简单区分下jQuery对象与DOM对象: <p id=”imooc”></p> 我们要获取页面上这个id为imooc ...