<!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. python 常见的错误类型 和 继承关系

    BaseException +-- SystemExit #系统结束 +-- KeyboardInterrupt #键盘中断 ctrl+D +-- GeneratorExit #主动结束 +-- Ex ...

  2. OpenFlow-Enaling innvation in Campus Networks

    OpenFlow-Enaling innvation in Campus Networks 出现问题 背景 Networks have become part of the critical infr ...

  3. unity射线碰撞检测+LayerMask的使用

    射线在unity中是个很方便的东西,对对象查找.多用于碰撞检测(如:子弹飞行是否击中目标).角色移动等提供了很大的帮助,在此做个总结与大家分享下 ,若有不足欢迎吐槽 好了,话补多说啦,直接进入主题: ...

  4. springmvc和struts2的区别（转）

    1.客户端浏览器发出HTTP请求.   2.根据web.xml配置,该请求被FilterDispatcher接收.   3.根据struts.xml配置,找到需要调用的Action类和方法, 并通过I ...

  5. 2151: 种树 - BZOJ

    Description A城市有一个巨大的圆形广场,为了绿化环境和净化空气,市政府决定沿圆形广场外圈种一圈树.园林部门得到指令后,初步规划出n个种树的位置,顺时针编号1到n.并且每个位置都有一个美观度 ...

  6. <转自原博客> NOIP2008 传纸条

    小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是,他们可以 ...

  7. BZOJ2631 tree 【LCT】

    题目 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u2 v2:将树中原有的边( ...

  8. 《c程序设计语言》读书笔记-5.5-指针实现strncpy，strncat，strncmp

    #include <stdio.h> #include <math.h> #include <stdlib.h> #include <string.h> ...

  9. knockout 表单绑定 要怎么Mapping才好

    问题 之前有了解过knockout,学习过绑定语法,结合帮助文档,做个Demo倒也不成问题,但是部分地方很不爽,不知道是我的用法不对,还是功力不够. 比如说,标签里定义的data-bind属性名,必须 ...

  10. Linux SPI总线和设备驱动架构之一：系统概述【转】

    转自:http://blog.csdn.net/droidphone/article/details/23367051/ 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 硬 ...