css 实现 lightbox

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

用户在网页上做某些操作的时候,可能可能希望用户不要同时进行其他操作,或者希望用户把注意力集中在特定的地方而又不想使页面跳转,这样就可以考虑使用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设置为一个很高的值使它们可以覆盖整个屏幕的其他元素
css 实现 lightbox

<%@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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/36104.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注