纯CSS制作的网页中的lightbox效果

czq111012

czq111012

2016-02-19 20:28

图老师小编精心整理的纯CSS制作的网页中的lightbox效果希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

  “Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K,大则上百K。如果你只是需要一个类似Lightbox的效果,这种百分之百纯CSS制造,不含js的办法倒是可以试试。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

以下是引用片段:
!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
        pThis 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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

纯CSS制作的网页中的lightbox效果

Web开发
纯CSS制作的网页中的lightbox效果

完全掌握纯CSS布局网页

Web开发
完全掌握纯CSS布局网页

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

纯CSS制作简洁的垂直导航

Web开发
纯CSS制作简洁的垂直导航

CSS教程:设计制作网页的CSS经验

Web开发
CSS教程:设计制作网页的CSS经验

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

纯CSS表单显示效果

Web开发
纯CSS表单显示效果

纯CSS搞的alt跟title效果

Web开发
纯CSS搞的alt跟title效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

巧妙运用CSS样式表立刻改变鼠标的样式

巧妙运用CSS样式表立刻改变鼠标的样式

JavaScript中避免Form重复提交的两种方案

JavaScript中避免Form重复提交的两种方案
下拉加载更多内容 ↓