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. SpringBoot跨域问题解决方案

    一.允许全部请求跨域许可的代码: 需要继承WebMvcConfigurerAdapter类 @Configuration public class MyWebAppConfigurer extends ...

  2. c语言3种链接属性: 外部（external）, 内部(internal)，无设置(none)

    c语言中,多个文件组合的时候,有可能标示名相同,那么这个时候编译器如何判别的呢?    c语言中有3种链接属性: 外部(external), 内部(internal),无设置(none)    外部( ...

  3. C#中Fun简单介绍及运用到项目中与缓存（本地缓存，Redis）结合使用

     1.简单介绍Fun C#中Fun和Action有点类似,都是一个委托方法,不同的是Func是有返回值的,而Action没有. (T)此委托封装的方法的参数类型. 备注:详情了解Fun到(https: ...

  4. SQL 收缩数据库日志的几种办法 (2005与2008 略有区别）

    在SQL Server 2000/2005中可以快速压缩日志log文件,通过SQL, 方法一: ---DBTEST 为数据库名,顺序最好别乱.注意:要先截断再清空,最后收缩! backup log D ...

  5. text-align:center属性失效

    text-align:center只对inline元素有效,失效的情况下 给它所有的子元素加上 display:inline-block即可 inline-block不兼容ie6

  6. json转化为对象数组

    1.ascx传值给aspx aspx页面 <%@ Page Title="" Language="C#" MasterPageFile="~/_ ...

  7. webstorm 设置uglify 压缩js文件

    第一步:打开npm,全局安装 npm install uglify-js -g 第二步: 打开webstorm的file->settings ->External Tools,点击左上角的 ...

  8. SQL语句常见DDL/DML/DCL操作部分试题（一）

    创建三个空表emp1,emp2,emp3,结构参考emp表 CREATE TABLE EMP1 AS SELECT * FROM EMP WHERE 1=2; CREATE TABLE EMP2 AS ...

  9. （一）python基础知识

    Python:解释型语言(一边翻译一边运行)注释:单行注释(#).多行注释(ctrl+/):''' '''和""" """ (python2 ...

  10. Python3 教程

    Python的3.0版本,常被称为Python 3000,或简称Py3k.相对于Python的早期版本,这是一个较大的升级.为了不带入过多的累赘,Python 3.0在设计的时候没有考虑向下兼容. 查 ...