如何应用灯箱打开一个div？

我有一个div，我想点击后在灯箱并将其显示在一个提交按钮如何应用灯箱打开一个div？

2012-01-09 Nadeem

您使用的是什么版本的插件？ – 2012-01-09 05:08:52

另外，这就像是一个“成功！” div的种类？ – 2012-01-09 05:09:44

我有一个div，里面有一些图片和文字，当用户点击那个div时会打开一个按钮，但是使用的是不使用css的java脚本 – Nadeem 2012-01-09 05:17:10

让我们先从CSS

.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; 

}

的black_overlay类是，这将使网页显得层淡出。这是一个黑色的80％不透明背景，与覆盖网页的浏览器（查看z-index）一样长，并且不显示（看显示器）。

白色内容类是带有照片/登录屏幕的图层/您希望在灯箱叠加层中显示的任何内容。这是一个放置在black_overlay图层上的白色图层（查看z-index，大于black_overlay图层）。溢出允许你有一个可滚动的内容。

在HTML文件中，把此行的标记之前现在

<div id="light" class="white_content">Hi, I am an happy lightbox</div><div id="fade" class="black_overlay"></div>

，三角函数的动作你要打开的灯箱和插入此代码：

document.getElementById('light').style.display='block';document.getElementById('fade').display='block';

例如，在链接是：

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Hide me</a>

一个完整的例子页面可以

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<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 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>

来源

2012-01-09 05:27:26

原始来源：http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/ – Ziggy 2012-09-06 19:02:57

伟大的工作.... – Sunny 2013-03-22 07:43:55

如何应用灯箱打开一个div？

回答

相关问题