<!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. Elasticsearch自定义分析器

    关于分析器 ES中默认使用的是标准分析器(standard analyzer).如果需要对某个字段使用其他分析器,可以在映射中该字段下说明.例如: PUT /my_index { "mapp ...

  2. STL之heap使用简介

    STL中并没有把heap作为一种容器组件,heap的实现亦需要更低一层的容器组件(诸如list,array,vector)作为其底层机制.Heap是一个类属算法,包含在algorithm头文件中.虽然 ...

  3. 团队冲刺Alpha（九）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  4. 第八章 Internet控制报文协议

    Internet控制报文协议 首先,我们必须先清楚,IP协议本身没有为终端系统提供直接的方法来发现那些发往目的地址失败的IP数据包,并且IP没有提供直接的方式来获取诊断信息,那么我们的故事来了. In ...

  5. HDU 1709 母函数天平问题 可出现减法的情况 The Balance

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  6. Servlet 返回Json数据格式

    其实就是把数据库中的数据查询出来拼接成一个Json数据 import dao.UserDao; import endy.User; import javax.servlet.ServletExcept ...

  7. [Codeforces Round #513 by Barcelona Bootcamp (rated, Div. 1 + Div. 2) ](A~E)

    A: 题目大意:给你一个数字串,每个数字只可以用一次,求最多可以组成多少个电话号码(可以相同),电话号码第一个数字为$8$,且长度为$11$ 题解:限制为$8$的个数和总长度,直接求 卡点:无 C++ ...

  8. Codeforces Round #352 (Div. 2) B

    B. Different is Good time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  9. C# 编写的Windows serice程序. 安装时出现异常!

    初学Windows Service 程序的编写,按照MSDN上写了一个service! 遇到安装服务的错误, 能帮忙看下是什么原因吗? 下面是在命令行下的安装结果: 正在运行事务处理安装. 正在开始安 ...

  10. python enumerate元素的时候可以获取下标，并且可以指定开始的下标值。

    list=["a","b","c","d","e"] for i,item in enumerate ...