来源忘记哪的了，我稍微做了点修改，想了想还是挂了转载的标签，嗯嗯：

<html>

<head>

<title>EXAMPLE</title>

</head>

    <body>

        <p>可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>

        <div id="light" style="display:none;position:absolute;top: 25%;left:25%; width:50%;height:50%;padding:16px;border:16px solid orange;background-color:white;z-index:2;overflow:auto;">

         This is the lightbox content.

        <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>

        </div>

        <div id="fade" style="display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);">

        </div>

    </body>

</html>

[转载][HTML] 普通的DIV分层以及版透明效果的更多相关文章

  1. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  2. Unity Shader入门精要学习笔记 - 第8章 透明效果

    转载自 冯乐乐的 <Unity Shader入门精要> 透明是游戏中经常要使用的一种效果.在实时渲染中要实现透明效果,通常会在渲染模型时控制它的透明通道.当开启透明混合后,当一个物体被渲染 ...

  3. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  4. 专题：DUILIB Win32 透明效果

    Win32 透明效果相关基础知识 Layered Windows 分层窗口.这是Windows2000开始引入的概念,重新定义了窗口的Hit Testing方法,以前都是把窗口按rectangle的方 ...

  5. Unity Shader 之 透明效果

    透明效果 透明效果一般有两种实现方法: 第一种,使用透明度测试(Alpha Test) 第二种,使用透明度混合(Alpha Blending) 透明度测试和透明度混合机制: 透明度测试(Alpha T ...

  6. 通过IE私有滤镜让IE6 7 8支持背景透明，内容不透明效果。

    CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...

  7. Android课程---Android设置透明效果的三种方法（转）

    1.使用Android系统自带的透明效果资源 <Button  android:background="@android:color/transparent"/>   ...

  8. DIV实现CSS 的placeholder效果

    placeholder是HTML5中input的属性,但该属性并不支持除input以外的元素   但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> ...

  9. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. gulp的点点滴滴

    去年用gulp,但一直没有写篇博客,今天有时间无聊写一篇.... 什么是gulp?gulp的官网title上对这个工具有一个比较准确的定义,叫做:基于流的自动化构建工具.如果你查看它的网页源代码,还会 ...

  2. WPF TextElement内容模型简介（转）

    本内容模型概述描述了 TextElement 支持的内容. Paragraph 类是 TextElement 的类型. 内容模型描述哪些对象/元素可以包含在其他对象/元素中. 本概述汇总了派生自 Te ...

  3. android Services注意地方

    使用service前需要在manifest声明: <manifest ... > ... <application ... > <service android:name ...

  4. 解决Undefined symbols for architecture x86_64: 报错 和 ld: warning: ld: warning: ignoring file警告

    出现这种错误的情况: 用iphone5模拟器编译程序正常, 用iphone5s以上的模拟器编译出现Undefined symbols for architecture x86_64: 报错 和 ld: ...

  5. TCP/UDP基本概念部分

    最近在读<Unix网络编程>和<TCP/IP详解>两本书,有了一些自己的心得与体会,总结下其中典型的问题. 1. 为什么建立连接需要三次握手? 谢希仁的<计算机网络> ...

  6. python中的几种集成分类器

    from sklearn import ensemble 集成分类器(ensemble): 1.bagging(ensemble.bagging.BaggingClassifier) 对随机选取的子样 ...

  7. BeanUtils的日期问题

    //注册日期类型转换器 //第一种  自定义方法            ConvertUtils.register(new Converter(){                //第一个参数是目标 ...

  8. 寒假挑战PythonTip(一人一python)总结——算法是程序的灵魂，程序员的心法

        2014年2月中旬,我上升到挑战python英雄榜第3名.这是我寒假修炼算法的成果之一.来一下总结吧! Linux的创始人Linus Torvalds在一次演讲中有一段涉及“什么才是优秀程序员 ...

  9. call/apply的第一个参数如果为null。this指向window

    call/apply是用来改变函数的作用域的,第一次参数为this,第二个参数为传输的值,例如 var a ="windowA"; var b = "windowB&qu ...

  10. SQL服务器名称的更改

    SQL服务器名称的更改   1.使用select @@ServerName可以看到当前数据库的服务器名称 2.从Sys.SysServers表中可以看到当前的所有服务器名称 3.使用 sp_drops ...