纯CSS制作的网页中的lightbox效果

  “Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K,大则上百K。如果你只是需要一个类似Lightbox的效果,这种百分之百纯CSS制造,不含js的办法倒是可以试试。

以下是引用片段:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
  <head>
    <title>纯CSSLightbox效果</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:16pxsolidorange;
      background-color:white;
      z-index:1002;
      overflow:auto;
    }
  </style>
  </head>
  <body>
    <p>Thisisthemaincontent.Todisplayalightboxclick<ahref="javascript:void(0)"onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
    <divid="light"class="white_content">Thisisthelightboxcontent.<ahref="javascript:void(0)"onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <divid="fade"class="black_overlay"></div>
  </body>
</html>

时间: 2024-11-08 19:22:24

纯CSS制作的网页中的lightbox效果的相关文章

一个用纯CSS制作的网页下拉菜单

网页特效代码实例:一个用纯CSS制作的网页下拉菜单. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[ <!ELEMENT a (#PCDATA | table)* > ]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang

纯CSS制作的新闻网站中的文章列表

应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项.如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容.CSS网页布局中,除了新闻列表.链接运行ul.li制作以外,我们通常将菜单也用ul.li来实现. 以下是引用片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

纯CSS制作的新闻网站中的文章列表_经验交流

应用CSS制作的新闻网站中的文章列表:ul是html中的无序列表,li是列表中的列表项.如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容.CSS网页布局中,除了新闻列表.链接运行ul.li制作以外,我们通常将菜单也用ul.li来实现.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

CSS实现的网页中文字排版的几种方式

CSS实现的网页中文字排版的几种方式!如果用得上可以直接用现成的了! 1.文字倒排(逆时针转90度)<br><br><span style="font-family:@宋体;color:red">尽人事 顺天命</span><br><br>2.文字正写竖排,中文竖排,从右往左读<br><br><div style="layout-flow: vertical-ideograp

CSS+DIV设计实例:纯CSS制作下拉导航菜单

css|菜单|设计|下拉 纯CSS制作的下拉导航菜单-这是一个老外的作品,基本上全是用CSS+HTML写出来的,值得大家学习 以下是引用片段:<style type="text/css">.menu {font-family: verdana, sans-serif; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.menu ul {padding:0; margin:0;lis

纯CSS制作二级导航

原文:纯CSS制作二级导航 一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一个竖向的ul. 1 <ul id="nav_ul"> 2 <li> 3 <a href="#">首页</a> 4 <ul class="nav_ul_ul"> 5

Photoshop制作火焰燃烧中的玫瑰效果

  本教程主要使用Photoshop制作火焰燃烧中的玫瑰效果,火焰玫瑰跟火焰字等的制作方法类似,过程:把主体抠出来,并把颜色调成橙黄色,高光部分需要单独加强;然后用火焰及烟雾素材叠加到玫瑰上面增加火焰效果;局部燃烧完成的部分还需要简单细化处理.喜欢的朋友一起来学习吧. 最终效果 1.新建个PSD文件,将玫瑰的素材图片导入内部,并且栅格化,通过魔术棒工具去除白色背景如图. 2.营造一下燃烧的气氛,新建个图层通过画笔绘制些火的颜色,将火焰的素材导入,图层混合模式改成滤色. 3.Ctrl + J 重新

ios-iOS 用UIWebView加载网页,网页中的js效果无效

问题描述 iOS 用UIWebView加载网页,网页中的js效果无效 iOS 用UIWebView加载网页,网页中的js效果无效,求助 解决方案 如果加载的是本地网页的话,看看网址的本地路径是否正确. 解决方案二: 网页加载效果UIWebView 加载网页UIWebView之加载本地网页 解决方案三: 你是指跳转什么的吗?ios当中json有很多问题,找找第三方sdk吧

CSS网页制作教程:网页中常用的web安全字体

在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体,但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用. 1,  Arial 微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读.但是,大写的"I"和小写的"l"是无法区别的,你可以考虑用T