一个纯CSS的 Lightbox效果

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 综合实例 -> 一个纯CSS的 Lightbox效果

一个纯CSS的 Lightbox效果

作者:佚名发布时间:2008-9-4 7:24:03 发布人: admin

<!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: 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: 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>

一个纯CSS的 Lightbox效果

将本文收藏到QQ书签与更多好友分享

上一篇：文章：超NB的js图片预览效果代码下一篇：文章：Showdate函数来显示各种英文日期

网页特效

一个纯CSS的 Lightbox效果

本类浏览排行 »

本站推荐文章 »