<!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. python基础面试题整理---从零开始 每天十题（01）

    最近在弄flask的东西,好久没写博客的,感觉少了点什么,感觉被别人落下好多,可能渐渐的养成了写博客的习惯吧.也是自己想学的东西太多了(说白了就是基础太差了,只是know how,不能做到konw w ...

  2. fckeditor配置详解

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

  3. 使用JAVA抓取网页数据

    一.使用 HttpClient 抓取网页数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  4. iOS 常用尺寸

    APP ICON: @1x:57*57 @2x:114*114 @3x:171*171  机型 屏幕尺寸   像素(px)pixel  点(pt)point    PPI iphone4s 3.5吋  ...

  5. ios之UITabelViewCell的自定义（xib实现2）

    上篇文章介绍了如何用UITableView显示表格,并讲了几种UITableViewCell的风格.不过有时候我们需要自己定义 UITableViewCell的风格,其实就是向行中添加子视图.添加子视 ...

  6. [JOY]1143 飘飘乎居士的约会

    题目描述 又是美妙的一天,这天飘飘乎居士要和MM约会,因此他打扮的格外帅气.但是,因为打扮的时间花了太久,离约会的时间已经所剩无几. 幸运的是,现在飘飘乎居士得到了一张nm的地图,图中左上角是飘飘乎居 ...

  7. 【Java_基础】空串、空格串、null的区别

    1.表示的区别 string str1 = "";    //空串      str1.length() 等于 0 string str2 = " ";   / ...

  8. Android自动化测试Uiautomator--UiCollection接口简介

    这个对象可以理解为一个对象的集合,因为UiSelector描述后得到的有可能是多个满足条件的控件集合,因此可以用来生成UiCollection,继承自UiObject. 用于枚举一个容器的用户界面(U ...

  9. 【11】把 GitHub 当 CMS 用

    把 GitHub 当 CMS 用 你的网站需要显示一些文字,但是你还不想直接放在 HTML 里面,那你可以把 GitHub 作为你储存内容的一个地方. 这样,就可以让任何一个非程序员通过修改 Mark ...

  10. app启动画面(prepo)

    IPhone启动画面以及图标的设置 目前IPhone的分辨率为:320X480.640X960.640X1136. Default.png                    320X480 iPh ...