<!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:#EEEEEE;
            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>

DIV层+CSS实现锁屏的更多相关文章

  1. 页面固定DIV层CSS代码

    有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动.本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixe ...

  2. javaWeb锁屏的简单实现

    简单介绍:需求上有个小功能,用户登录后点击用户名,可以点击锁屏,锁屏解除,需要输入正确的密码才能进入管理后台页面enheng(*/ω＼*)(*/ω＼*)(*/ω＼*) 思路简介:其实刚看到要做锁屏,第 ...

  3. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  4. 利用css如何让嵌套的div层不继承父div层的透明度？

    http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...

  5. CSS实现DIV层背景透明而文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  6. 第一百三十四节，JavaScript，封装库--遮罩锁屏

    JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...

  7. 【JavaScript 13—应用总结】：锁屏遮罩

    导读:上次说了,当弹出登录框时,由于背景色和弹出框时一样的,这样子,其实比较难聚焦到底该操作哪一块.所以,如果,有了颜色的区分,那么通过屏幕遮罩的效果,就可以将我们希望要被处理的东西突出显示.也就达到 ...

  8. web页面锁屏初级尝试

    因为工作需要,所以在网上找了一些素材来弄这个功能.在我找到的素材中,大多都是不完善的.虽然我的也不是很完善,但是怎么说呢.要求不是很高的话.可以直接拿来用的[需要引用jQuery].废话不多说直接上代 ...

  9. jQuery仿Android锁屏图案应用插件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 训练caffe:registry.count(type) == 0 (1 vs. 0) Solver type Nesterov already registered

    命令:./continue-train.sh 内容:../../caffe-master/build/tools/caffe train -gpu=$1 -solver=solver.prototxt ...

  2. git使用及一些配置、问题

    安装https://git-for-windows.github.io/ 一.绑定用户名.邮件地址 git config --global user.name "Your Name" ...

  3. EXTJS4.0 grid 可编辑模式 配置

    首先配置这个参数 plugins:[//插件 Ext.create("Ext.grid.plugin.CellEditing",{ clicksToEdit:1//单元格 点一下就 ...

  4. jquery defered的progress方法实现进度条

    效果如图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. Iterator pattern 及其在java API中的运用

    1.问题: 当我们看到java中的Collection,List,Set,Map等集合类时都可以用Iterator进行遍历元素时,我们是否感到很神奇.我们不禁要问java是如何实现这一目标的.这就是我 ...

  6. 7月14号day6总结

    今天学习过程和总结 IOC和DIO IOC相当于一个容器,在容器中加注解.接口存在意义依赖注入.4个注解都行,依赖注入只能发生在IOC容器里, pring IOC 容器可以管理Bean 的生命周期,S ...

  7. Linux命令之time

    我使用过的Linux命令之time - 测定一个命令的资源使用情况 本文链接:http://codingstandards.iteye.com/blog/798788   (转载请注明出处) 用途说明 ...

  8. php 内核变量 引用计数器写时复制

    写时复制,是一个解决内存复用的方法,就是你在php语言层,如$d=$c=$b=$a='value';把$a赋给另一个或多个变量,这时这个变量都只占用一个内存块,当其中一个变量值改变时,才会开辟另一个内 ...

  9. Dreamweaver安装须知

    1.断网安装,否则让你登录邮箱什么的,安装完成后退出,先不要运行: 2.将破解的文件直接复制到安装的文件的地方覆盖:(将32文件夹下的amtlib.dll复制到安装完毕的dw_cs6下,覆盖原来的am ...

  10. python每日一类（1）：pathlib

    每天学习一个python的类(大多数都是第三方的),聚沙成金. -------------------------------------------------------------------- ...