<!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. Github - Unity3d-Timers

    https://github.com/pointcache/Unity3d-Timers Unity3d-Timers Timer class with various behaviors About ...

  2. StringBuilder_学习笔记

    参考:https://www.jianshu.com/p/160c9be0b132 连接符号 "+" 本质 字符串变量(非final修饰)通过 "+" 进行拼接 ...

  3. Strassen优化矩阵乘法(复杂度O(n^lg7))

    按照算法导论写的 还没有测试复杂度到底怎么样 不过这个真的很卡内存,挖个坑,以后写空间优化 还有Matthew Anderson, Siddharth Barman写了一个关于矩阵乘法的论文 < ...

  4. Recompile Squid with SSL Bump

    https://docs.diladele.com/administrator_guide_4_0/system_configuration/https_filtering/recompile_squ ...

  5. javaScript构造函数、原型、面向对象编程

    js最重要也是最核心的东西就是对象了,入行这么长时间,一直对面向对象一知半解.网上有很多介绍对象对象的内容,这里也做了很多借鉴, 尤其是阮一峰老师的文章.我这里写的大多例子都是阮一峰老师文章的例子,但 ...

  6. HDU 1153 magic bitstrings（读题+）

    hdu 1153 magic bitstrings 题目大意 一个质数p,现在让你求一个p-1长度的“01魔法串”.关于这个魔法串是这么定义的:     我们现在把这个串经过一段处理变成一个长宽均为p ...

  7. 51nod1086 背包问题 V2——二进制优化

    有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里,每种物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi ...

  8. Linux Mint---ATI显卡驱动安装篇

    显卡驱动可谓是至关重要,当时折腾debian驱动的时候可是弄了好几天才搞定的,现在却非常容易就是装上, 详见这篇博客:http://www.yyearth.com/article/14-03/amd1 ...

  9. [C++对象模型][8]多重继承与虚函数表

    转载: [C++对象模型][8]多重继承与虚函数表 一 多重继承 1) 代码: Code #include <iostream> using namespace std; class B1 ...

  10. 【原创】Linux环境下的图形系统和AMD R600显卡编程(8)——AMD显卡DRM驱动初始化过程

    前面几个blog对DRM驱动.显卡的显存管理机制.中断机制都进行了一些描述,现在阅读AMD drm驱动的初始化过程应该会轻松许多. 下面是一AMD的开发人员编写的文章(先暂时放在这里,后续有时间再添加 ...