做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....
《CSS与Div技术在网页模板设计中的应用》 在网页设计领域，CSS（Cascading Style Sheets）与Div元素的组合使用，已经成为构建现代、响应式网页的重要手段。本篇将详细探讨“css-template(5).rar”这个压缩包中所...
4. **父窗口准备**：在父窗口中，需要有一个容器元素（例如`<div id="parentLightbox"></div>`），用于承载Lightbox内容。同时，父窗口也需要包含Lightbox的CSS样式，以便正确显示Lightbox。 5. **配置和定制**：...
<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"> 文字说明...
Lightbox是一种常见的网页设计技术，用于在用户点击图像时显示一个全屏或半透明的弹出窗口，通常用于查看大图或多媒体内容。在这种模式下，网页背景通常会变暗或“变灰”，以增强焦点并减少干扰。下面将详细解释如何...
<div id="fb-root"></div> <div class="wrap small-width"> <div id="try"></div> </div> jQuery Lightbox插件是一款响应速度快的基于jquery.swipebox插件...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
<div class="lightbox"> <a href="large-image.jpg" data-lightbox> 图片预览"> </div> /* CSS样式 */ .lightbox a[data-lightbox] { display: none; /* 隐藏大图链接 */ } .lightbox a[data-lightbox]:...
在网页设计领域，使用DIV+CSS+(JS)技术来创建相册已经成为了一种常见的实践，因为这种方法能够实现美观且互动性强的展示效果。标题“几款漂亮的DIV+CSS+(JS)打造的相册”和描述“几款漂亮的DIV+CSS+(JS)打造的相册，...
jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页多用的飞飞图片幻灯插件演示 jquery仿flash产品图片多角度展示特效代码 jquery仿flash图片放大相册...
<div id="lightbox"> <div id="overlay"></div> <div id="content"> <!-- 在这里放置弹出内容 --> </div> </div> ``` 2. **CSS 样式**： 接下来，我们为`#overlay`和`#content`设置样式。`#overlay`是覆盖...
const overlay = document.createElement('div'); overlay.classList.add('overlay'); document.body.appendChild(overlay); videoLinks.forEach(function(link) { link.addEventListener('click', function(e...
《使用jQuery和Lightbox构建可滚动相册的实践详解》 在现代网页设计中，展示图片的方式多种多样，其中一种常见的方法是通过相册功能。本文将深入探讨如何利用jQuery库和Lightbox插件，创建一个支持鼠标滚动的动态...
Lightbox的基本工作原理是：当用户点击一个缩略图时，JavaScript会动态创建一个新的HTML元素（如div）来承载放大后的图片，并将其插入到DOM（文档对象模型）中。这个元素通常具有半透明背景，以遮挡原页面内容，形成...
var lightbox = $('<div id="lightbox"></div>'); var image = $('<img src="' + imgSrc + '" alt="' + imgAlt + '"/>'); // 添加关闭按钮 var closeButton = $('<button id="close-lightbox">关闭</button>');...
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery...
3. 创建弹出层：在页面上动态创建一个包含大图的div元素，作为Lightbox的基础。这个div通常具有半透明背景和居中的样式，以提供沉浸式的查看体验。 4. 显示和隐藏：通过修改CSS样式，控制Lightbox的显示和隐藏。...
$('<div class="lightbox-overlay"></div><div class="lightbox-content"><img src="' + imgSrc + '"></div>').appendTo('body'); $('.lightbox-overlay').fadeIn(); }); $('.lightbox-overlay').on('click', ...
<div id="lightbox-mask"></div> <div id="lightbox"> <img id="lightbox-image" src="" alt=""> <button id="close-lightbox">关闭 </div> ``` ```css #lightbox-mask, #lightbox { display: none; } #...
$('<div id="lightbox"><img src="' + imgSrc + '"/><p>' + imgAlt + '</p><button id="close">关闭</button></div>') .appendTo('body') .fadeIn(); // 添加关闭按钮的点击事件 $('#close').click(function() ...