<!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. Hermite 矩阵的特征值不等式

    将要学习 关于 Hermite 矩阵的特征值不等式. Weyl 定理 以及推论.   Weyl 定理 Hermann Weyl 的如下定理是大量不等式的基础,这些不等式要么涉及两个 Hermite 矩 ...

  2. react native在xcode真机调试ios

    1修改URL地址:打开项目目录下的AppDelegate.m文件,修改里面的URL,把localhost改为你的电脑的IP.在Mac系统下,你可以在系统设置/网络里找到电脑的IP地址. 2选择设备:把 ...

  3. css3中animation属性animation-timing-function知识点以及其属性值steps()

    在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...

  4. 伪题解 洛谷 P1363 幻想迷宫（DFS）

    毒瘤题,做了一晚上抄题解A了 因为是抄题解,我也不好意思说什么了,就发篇博客纪念一下吧 #include<iostream> #include<cstring> #includ ...

  5. 运用模逆运算（同余方程）来解决Matlab课上的一道思考题

    一道Matlab编程题 & 暴力解法 Matlab课上老师出了这样一道题: 一个篮子有K个鸡蛋: 2个2个拿剩1个: 3个3个全部拿完: 4个4个拿剩1: 5个5个拿剩4个: 6个6个拿剩3个 ...

  6. PHP 递归无限极下级

    下面是自己用到的一些递归方法,当然都是借鉴的,各位看官请勿怪 第一种 有层级 $array = array( array('id' => 1, 'pid' => 0, 'n' => ...

  7. ios之UISlider

    初始化一个Slider   UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(0, 400,320 , 20)]; 滑块是一个标 ...

  8. UIViewAnimationOptions

    常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:执行UIView动画时,自动更新Subview的Layout约束.. UIView ...

  9. C++系统学习之四：数组

    与vector的异同 相同:都是存放类型相同对象的容器 不同:数组的大小确定不变,不能随意向数组中增加元素 1.定义和初始化内置数组 数组中元素的个数也属于数组类型的一部分,编译的时候维度应该是已知的 ...

  10. UVa-101-木块问题

    这题用vector比较好写,我们设置对应的几个函数,然后进行相应的操作来简化代码,这样才不易出错. 对于输入和操作来说我们经分析之后,可以看到最后一个操作时最原始的操作也就是不需要还原任意一个堆任意高 ...