1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>DIV CSS遮罩层</title>
  5. <script language="javascript" type="text/javascript">
  6. function showdiv() {
  7. document.getElementById("bg").style.display ="block";
  8. document.getElementById("show").style.display ="block";
  9. }
  10. function hidediv() {
  11. document.getElementById("bg").style.display ='none';
  12. document.getElementById("show").style.display ='none';
  13. }
  14. </script>
  15. <style type="text/css">
  16. #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=70);}
  17. #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;}
  18. </style>
  19. </head>
  20. <body>
  21. <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
  22. <div id="bg"></div>
  23. <div id="show">测试
  24. <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
  25. </div>
  26. </body>
  27. </html>

div效果很好的遮盖层效果的更多相关文章

  1. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  2. 弹窗层效果的实现（非jQuery实现）

    要想实现弹窗的效果,首先应该创建一个覆盖层maskLayer,以及一个显示层presentLayer. 其次,每次弹窗时(除首次弹窗外),maskLayer的显示以及隐藏不应该导致文档流的reflow ...

  3. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  4. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  5. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  7. Android 遮罩层效果

    (用别人的代码进行分析) 不知道在开发中有没有经常使用到这种效果,所谓的遮罩层就是给一张图片不是我们想要的形状,这个时候我们就可以使用遮罩效果把这个图片变成我们想要的形状,一般使用最多就是圆形的效果, ...

  8. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

随机推荐

  1. python day3_liaoxuefeng

    1.Python的循环有两种,一种是for...in循环,依次把list或tuple中的每个元素迭代出来,看例子: names = ['Michael', 'Bob', 'Tracy'] for na ...

  2. python map filter reduce的优化使用

    这篇讲下python中map.filter.reduce三个内置函数的使用方式,以及优化方法. map()函数 map()函数会根据提供的函数对指定序列做映射. 语法: map(function,it ...

  3. Redis开启远程登录连接

    Redis 安装详见 http://www.cnblogs.com/zendwang/p/6560628.html 当前安装测试版本:Redis 3.2.8 默认安装完毕Redis只能本机访问 [ro ...

  4. 使用foreach需要判空。

    今天写代码的时候,需要遍历一个作为参数传递进来的容器, 当时顺手就加上了判空条件: if(null==list)return; 后来就像,不知道遍历(foreach)有没有帮我做这个工作: 下面看实验 ...

  5. js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  6. C++笔记001：Microsoft Visual Studio 2010软件的安装与建立第一个cpp文件

    原创笔记,转载请注明出处! 点击[关注],关注也是一种美德~ 我学习C++使用软件为Microsoft Visual Studio 2010. 首先,软件的安装包 链接:https://pan.bai ...

  7. 部署 Helm - 每天5分钟玩转 Docker 容器技术（162）

    本节我们将安装和部署 Helm 客户端和 Tiller 服务器. Helm 客户端 通常,我们将 Helm 客户端安装在能够执行 kubectl 命令的节点上,只需要下面一条命令: curl http ...

  8. leetcode之Find All Numbers Disappeared in an Array

    问题来源:Find All Numbers Disappeared in an Array 很久没有刷题了,感觉大脑开始迟钝,所以决定重拾刷题的乐趣.一开始不要太难,选一些通过率高的题目做,然后就看到 ...

  9. Activity的四种启动模式任务栈图解

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 今天带来另一篇Activity的文章--Activity的四种启动模式.该篇文章,会以图文讲解的方式带你彻底掌握Activity的启动 ...

  10. win10+ubuntu双系统安装方案

    网上有很多教程,大多是win7,win8的,我折腾了一天,今天终于都安装好了,折腾的够呛,很多人都说挺简单的,嗯其实的确很简单,很多人回复说安装不成功,很有可能就是电脑安全权限的问题,我用的是华硕的电 ...