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. Delphi 7中的四种消息框

    Delphi中平常使用的消息框有四种形式,有ShowMessage.MessageDlg.Application.MessageBox.MessageBox.下面来深入了解下这四种形式的实现和使用.1 ...

  2. windows平台下cocos2d-x-3.0beta2创建新项目

    我目前使用的版本是cocos2d-x-3.0beta2 前提: 已安装了python2.7.3 已安装了VS2012 打开我的cocos2d-x-3.0beta2所在文件夹F:\Framework\c ...

  3. Linux编程之内存池的设计与实现（C++98）

    假设服务器的硬件资源"充裕",那么提高服务器性能的一个很直接的方法就是空间换时间,即"浪费"服务器的硬件资源,以换取其运行效率.提升服务器性能的一个重要方法就是 ...

  4. IntelliJ IDEA的编译设置

    好就之前遇到的bug,eclipse转idea时,idea不编译一个项目! 查了半天是IntelliJ IDEA的编译设置问题,不设置编译该文件,idea就不编译!

  5. Settings.settings

    项目的设置,有些设置是不能变的,有些设置是由用户决定的,Settings.settings都能搞定. 范围是应用程序级别的是只读属性,范围是用户级别的可读写 读取的方式是: Properties.Se ...

  6. python学习之路基础篇(第四篇)

    一.课程内容回顾 1.python基础 2.基本数据类型  (str|list|dict|tuple) 3.将字符串“老男人”转换成utf-8 s = "老男人" ret = by ...

  7. python序列化pickle/cPickle

    一.pickle/Cpickle简介 Python序列化的概念很简单.内存里面有一个数据结构,你希望将它保存下来,重用,或者发送给其他人.你会怎么做?这取决于你想要怎么保存,怎么重用,发送给谁.很多游 ...

  8. Linux 新系统个人配置

    1,装codeblocks 2,装vim,检查gcc,g++,修改vim环境 cd ~vim  .vimrc添加如下几行:set shiftwidth=4          (表示每一级缩进的长度)s ...

  9. JAVA中的枚举类

    某些情况下一个类的对象是有限而且固定的,例如性别就只有两个类(考虑大众情况).因此这种实例有限而且固定的类,java里面叫枚举类.枚举类的关键字是enum,一些基本的命名规则和文件命名等细节和一般的类 ...

  10. Java日志-Log4j2

    Log4j2参考资料 Log4j2 官方配置文档 1. Log4j2基本概念: Logger 在代码中产生日志信息的.比如logger.info("some log message" ...