<!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. C++类型强制转换<转>

    转载:http://www.cnblogs.com/goodhacker/archive/2011/07/20/2111996.html C风格的强制类型转换(Type Cast)很简单,不管什么类型 ...

  2. fckeditor配置详解

    使用配置设置: . FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称 . FCKConfigFCKConfig.EditorAreaC ...

  3. 洛谷五月月赛【LGR-047】划水记

    虽然月赛有些爆炸,但我永远资瓷洛谷! 因为去接水,所以迟到了十几分钟,然后洛谷首页就打不开了-- 通过洛谷题库间接打开了比赛,看了看\(TA\),WTF?博弈论?再仔细读了读题,嗯,判断奇偶性,不过要 ...

  4. swift中使用sqlite3

    import Foundation /** 1. 打开数据库 2. 如果没有数据表,需要首先创表 3. 数据操作 */ class SQLite { var db: COpaquePointer = ...

  5. 【Java_基础】Java内部类详解

    1.四种内部类 java中的四种内部类:成员内部类.静态内部类.局部内部类和匿名内部类.其中匿名内部类用到的最多. 1.1.成员内部类 若一个类定义在另一个类的内部作为实例成员,我们把这个作为实例成员 ...

  6. mysqlfailover测试

    mysqlfailover是mysql官方用python语言写的一款工具,包含在mysql utilities工具集中.主要作用是保障mysql高可用.他会定时检测节点状态,当master节点不可用时 ...

  7. windows显示文件扩展名

    搜索打开windows的文件资源管理选项,如下去掉“隐藏已知文件类型的扩展名”即可 打开之后显示如下:

  8. Perl学习之四：语句(续)

    循环控制:1.last 退出标签的语句块2.next 3.redo不推荐,循环次数不可控 4.goto不推荐.***************************************标签: 先 ...

  9. 【php】子类覆盖超类方法，在超类里调用此方法会出现何种现象

    <?php class A { public function getName() { echo $this->name(); } function name () { return 'l ...

  10. UVa 11987 并查集 Almost Union-Find

    原文戳这 与以往的并查集不同,这次需要一个删除操作.如果是叶子节点还好,直接修改父亲指针就好. 但是如果要是移动根节点,指向它的所有子节点也会跟着变化. 所以要增加一个永远不会被修改的虚拟根节点,这样 ...