css 实现 lightbox

最新推荐文章于 2020-08-02 17:53:41 发布

暗黑小白

最新推荐文章于 2020-08-02 17:53:41 发布

阅读量1k

点赞数

分类专栏： web开发文章标签： css lightbox

本文链接：https://blog.csdn.net/tan_tan_1/article/details/17961807

版权

web开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用户在网页上做某些操作的时候，可能可能希望用户不要同时进行其他操作，或者希望用户把注意力集中在特定的地方而又不想使页面跳转，这样就可以考虑使用lightbox。

lightbox的实现方法可以使用纯css的和使用jQuery的，使用jQuery的功能更强大。
如果使用css的比较简单，功能也简单一些。

.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: 46%; 
height: 50%; 
padding: 13px; 
border: 0px;
background-color: white; 
border: 10px solid #3399ff; 
z-index:1002; 
overflow: auto; 
}

使用css的原理也挺简单，就是使用两个div将两个div的z坐标z-index设置为一个很高的值使它们可以覆盖整个屏幕的其他元素

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css.css" type="text/css"/>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">        
    </head>
    <body>
        <div id="light" class="white_content">
        <a target="_blank" href="#"></a> 
        <br>
        <a href="javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a>
        <input type="text"/>
        </div> 
        <div id="fade" class="black_overlay" οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>

        <div class="commonloginbar">
            <a class="loginLabel" href="javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">弹出lightbox</a>
        </div>
        
        <div>TODO write content</div>

    </body>
</html>

暗黑小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 实现 lightbox

在用户浏览网页的时候可能会有这样的想法，不想从当前页面退出就可以登陆，这种情况下可以考虑使用lightbox的方式来进行登录，同时要保持当前页面不变，并显示登录状态那就需要对页面的某一部分信息更新以显示登录状态，那就要使用ajax方式。
复制链接

扫一扫

专栏目录