做lightbox时候，如果是另外一个页面的话，我用的是redbox，而在同一页面中的div做了好长时间也没做出来，要是单单一个div到也还好办，关键这个div还要用到本页面其他的数据，没办法在网上搜到了这段纯css控制的，挺不错的。
<html>
<head>
<title>LIGHTBOX EXAMPLE</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 black;
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>
<div style="height:1090px"></div>
</body>
</html>
分享到：
相关推荐
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
<link rel="stylesheet" href="jquery.lightbox-0.5.css"> 载入 JavaScript 文件 <script src="jquery.js"></script> <script src="jquery.lightbox-0.5.js"></script> DOM 结构 <div id="element_id"> 文字说明...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
<div id="fb-root"></div> <div class="wrap small-width"> <div id="try"></div> </div> jQuery Lightbox插件是一款响应速度快的基于jquery.swipebox插件...
lightbox代码 lightbox特效<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html <head> <meta http-equiv="Content-Type" content="text/html; ...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...
<link rel="stylesheet" href="pic-css/lightbox.css" type="text/css" media="screen" /> 2.放置blank.gif close.gif closelabel.gif loading.gif next.gif nextlabel.gif prev.gif prevlabel.gif 到文件夹pic-...
LIghtbox控件是一款图片展示空间，可以支持图片上一张下一张，能浏览一组图片，点击以后出现一个新的DIv,然后图片放大，背景层变灰，有预加载效果
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
lightgallery.js 是一款功能齐全的纯 JavaScript lightbox 组件，它有以下特点： 支持响应式 模块化设计，内置插件 支持移动设备 支持缩略图 支持社交分享 支持视频 20 多种 CSS3 过度效果 ...
用层模拟，框架+DIV+Javascript.... 用window.open()；这种方法的缺点是，会被浏览器或者相关软件给屏蔽掉。用层模拟的话，如果想实现较复杂点的窗口，就比较困难，第三种方法是综合了所有的网页制作知识，可以提供...
灯箱演示 ... 该演示的灵感来自 一些笔记 灯箱只是一个用半透明黑色覆盖覆盖整个屏幕的div 灯箱有属性position: fixed;...通过$("#lightbox").show()灯箱 div 后，单击处理程序会侦听单击以再次隐藏 div
jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页多用的飞飞图片幻灯插件演示 jquery仿flash产品图片多角度展示特效代码 jquery仿flash图片放大相册...
NULL 博文链接：https://clfsw.iteye.com/blog/657170
FacyBox是一个基于jQuery实现，Facebook/Fancybox风格的lightbox控件。可以展示图片、Div或通过Ajax加载的内容。
顶尖的ajax弹出层效果，有greybox，lightbox，mf_lightbox...
simple-lightbox Vue.js组件，用于由支持的移动和桌面触摸式图像灯箱安装// For Vue.js 2.0+npm install vue-simple-lightbox用法导入模块与其他任何Vue组件一样，将其注册为组件在模板中使用它例< template> < div ...
程序php版 : php+myslq+apache+div+css。php版采用自适应网站模式开发，兼容pc端、移动和平板端设备。 主要功能： 主要栏目：Home About us Products News FAQ Feedback Contact us。 文件名：自定义产品文件名，...
程序php版 : php+myslq+apache+div+css。php版采用自适应网站模式开发，兼容pc端、移动和平板端设备。 主要功能： 主要栏目：Home About us Products News FAQ Feedback Contact us。 文件名：自定义产品文件名，...