纯CSS制作的网页中的lightbox效果 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

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

天极网 2007/12/1 21:57:27 深山行者字体:大中小浏览 10927

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

以下是引用片段：
<!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样式表立刻改变鼠标的样式

后一页:css里expression实现界面对象的批量控制

相关阅读: 有利于搜索引擎的一些常用的CSS命名规则; 连云港电子杂志网站; 深山行者asp购物网终于上线了; js中innerHTML，innerText，outerHTML的用法与区别; 请勿在本地站发布乱七八糟的广告，本站所有的留言与评论全是需要审核的; 山西万景国际旅行社晋中分公司; 查询某个字符在字符串中出现的位置数组; DIV+CSS奇怪问题之边界（margin）叠加

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery设置或获取修改classname; 利用css3.0写出一个音乐播放的唱片碟盘的效果; 利用css中的scale()实现放大缩小效果; 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明; css背景使用base64编码或者将base64编码放在img图片标签中; 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 文本框禁止方式; 乱涂; DateDiff(计算类型,日期1,日期2)计算两个日期之间的差; JavaScript max() 方法; 景点门票预订商建站解决方案; 我的地盘我做主之留言板模板

更多标签热门标签

javascri 旅游文字样式彩色 txt DropShadow 右击左右模板模仿类别 SEO 舒服 ul 计划保留清除 Request 替换添加深山旅游网站管理系统V1.0 处理项目表达 windows 背景蓝色理想繁体柱状过期 label important 利用position把div放在flash上 expression link strong 爱墙 XMLHTTP 滚动 vb skype 源文件成功 split 数字工具访问量等待关闭 vista