<!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. jquery实现跑马灯效果（一）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CPP-网络/通信：POST

    BOOL PostSubmit(CString strUrl,const CString&strPara, CString&strContent){ BOOL bRet=FALSE; ...

  3. CPP-网络/通信：SOCKET

    客户端实现代码: //引入头文件 #include <WinSock2.h> //客户端创建Socket////////////////////////////////////////// ...

  4. javase(3)_二叉树

    // 1.求二叉树中的节点个数 // 2.求二叉树的深度 // 3.前序遍历,中序遍历,后序遍历 // 4.分层遍历二叉树(按层次从上往下,从左往右) // 5.将二叉查找树变为有序的双向链表 // ...

  5. HTML5触摸事件

    touchstart .touchmove .touchend 事件 touchstart事件:当手指触摸屏幕时触发,即使有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动时触 ...

  6. 【Java基础】java中的反射机制与动态代理

    一.java中的反射机制 java反射的官方定义:在运行状态下,可以获取任意一个类的所有属性和方法,并且可通过某类任意一对象实例调用该类的所有方法.这种动态获取类的信息及动态调用类中方法的功能称为ja ...

  7. Xshell 配色方案 Ubuntu Solarized_Dark isayme

    前言 最近在用Ubuntu,发现它的配色方案挺好看的,所以查了下有没有大神做过Xshell的Ubuntu配色方案. 一看,果然还是有大佬做了这个的. 三套配色配置如下: 1. Ubuntu的Solar ...

  8. Vue.js—单元测试

    Vue.js--测试 这里采用的是Vue官方工具(Vue-CLI)搭建出来的项目,在这个搭建工具中推荐的两种测试分别是 端到端的测试 E2E 单元测试 Unit Test 端到端的测试(E2E) E2 ...

  9. MySQL学习点滴

    MySQL学习点滴 --分区表 概述: 分区功能并不是在存储引擎层完成的,因此很多存储引擎包括InnoDB, MyISAM, NDB等都支持分区功能.但也并不是所有的存储引擎都支持分区.在使用分区前, ...

  10. restful规范和drf模块

    restfu1规范 它是一个规范,面向资源架构 10条规范: 1.api与用户的通信协议,总是使用https协议 api网上提供的接口 2.域名: 尽量将api部署在专用域名(会存在跨域问题) API ...