纯CSS制作的网页中的lightbox效果
来源:天极网 发布时间:2007-11-06 18:59:00
标签:lightbox,css
“Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K,大则上百K。如果你只是需要一个类似Lightbox的效果,这种百分之百纯CSS制造,不含js的办法倒是可以试试。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>纯CSS Lightbox效果</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">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" class="black_overlay"></div>
</body>
</html>
效果演示:
更多关于Lightbox的文章
0
投稿
猜你喜欢
- 这是fenye.asp具体代码:以下是引用片段:<%Const maxPagesize=1000 '设置分
- 通常用户看到的页面的样式会受到三层控制,第一层是浏览器的默认样式,第二层是网页定义样式,第三层是用户自定义样式。和CSS一样,后面的优先级高
- 如何在第10000名来访者访问时显示中奖页面?看看下面的代码:< SCRIPT LANGUAGE=VBScript
- 1.彻底弄懂CSS盒子模式一(DIV布局快速入门)3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 4.彻底弄懂CSS盒子模式四(绝对
- 在linux服务器lvs负载均衡、双机热备应用中经常用到mysql双机热备,安装和配置过程如下:一、 安装MYSQL# cp mysql-s
- 设计页面时,经常会从一个页面打开一个子窗口以供浏览者查看。通常,这种子窗口中的内容一经浏览者看过,对于浏览者而言就不再需要,而他们常常会忘记
- CSS是制作网页效果必不可少的东西,字体的颜色定义、表格的样式定义、图片的特效等等都少不了它。但在Dr
- 一般情况下TextArea区输入的文字数量是没有限制的,但是我们可以通过javascript限制表单的文字字数。如下javascript代码
- 阅读上一篇:WEB2.0网页制作标准教程(11)不用表格的菜单辛苦了好多天,我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们
- JAN-1(January) FEB-2(February) MAR-3(March)APR-4(April) MAY-5(Ma
- 上次帮朋友写过的一个简单切换效果,超级简单,但也比较适用.因为用到了CSS Sprite技术,DEMO中附带了IE6兼容png的JS.核心J
- 内部存储格式:世纪、年、月、日、小时、分钟、秒默认格式是:DD-MON-RR。SYSDATE 返回当前的系统时间。SELECT S
- AddHeaderAddHeader 方法用指定的值添加 HTML 标题。该方法常常向响应添加新的 HTTP 标题。它并不替代现有的同名标题
- 代码如下:< % '功能:显示数据库中表名、字段名、字段内容 '原创:wangsdong
- 如何做一个随机密码产生器?<%genPassword = ""RandomizeFor&nbs
- 内容摘要:浏览器不兼容这个难题,一直是网页设计师们头痛的事情。ie7.0的面世,尚且不论他是否较之ie6.0进步, ie7和ie6
- asp之字符串函数示例用字符串函数对字符串进行截头去尾、大小写替换等操作。函数语 * 能LenLen(string|varname)返回字符串
- 这篇论坛文章主要介绍了Oracle数据库到SQL Server数据库主键的迁移过程,具体内容请参考下文。由于项目需要要将以前Oracle的数
- 1. @@rowcount: 获取受影响行数 代码如下:update SNS_TopicData set TopicCount=TopicC
- 下面我们用HTML来上传3个文件看看,它包含了文本描述字段和多项选择:upload.htm<HTML> <BOD