<!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. 【图文并茂】DEV配置NTL库

    一开始根据陈老师的博客:再说如何在DEV C++中搭建NTL库 后来发现自己虽然跟着一步一步来做,还是做错了很多回. 究竟怎么一回事呢?后来我发现一个致命的错误很容易忽视,所以我就重新写一篇博客. 来 ...

  2. Linux命令基础操作--vim 归档 压缩 分区 格式化 挂载 Innode

    1 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) 使用 cat命令将查看的文件合并输出到/1.txt 这里的关键:定位到文件,如果后面加上/后被认为是目录 分为两步,先 ...

  3. Windows MinGW 64-bit boost 踩坑

    >g++ -Wall -shared -g -DBUILD_DLL main.cpp -ID:\gcc\boost\include\boost-1_69 -LD:\gcc\boost\lib - ...

  4. 前端css学习记录

    参考资料:CSS权威指南(第三版)中文版 核心要点: HTML负责标记文档的结构(HyperText Markup Language),结构化语言. CSS 负责表现文档的样式(Cascading S ...

  5. 【笔记】PIL 中的 Image 模块

    Image 模块提供了一个同名类(Image),也提供了一些工厂函数,包括从文件中载入图片和创建新图片.例如,以下的脚本先载入一幅图片,将它旋转 45 度角,并显示出来: 1 >>> ...

  6. LeetCode（119） Pascal's Triangle II

    题目 Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3, Return [ ...

  7. JS(异步与单线程）

    JS(异步与单线程) 题目1.同步和异步的区别是什么,试举例(例子见知识点) 区别: 1.同步会阻塞代码执行,而异步不会 2.alert 是同步,setTimeout 是异步 题目2.关于 setTi ...

  8. Django之ORM操作(重要)

    Django ORM操作 一般操作 看专业的官网文档,做专业的程序员! 必知必会13条   <1> all(): 查询所有结果 <2> get(**kwargs): 返回与所给 ...

  9. OpennSSL之基本了解

    HTTPS是一种协议,等于HTTP+TLS(由于历史原因,SSL3.0之后就被TLS1.0替代了).openssl是一套开源工具集,主要有两个特性: 实现了ssl2,ssl3,TLSv1,TLSv1. ...

  10. cf950e Data Center Maintenance

    若推迟 \(u\) 必推迟 \(v\),则连边 <\(u,v\)>. 求强联通分量后缩点,答案显然是出度为 \(0\) 且 size 最小的 scc. #include <iostr ...