jQuery、MooTools和JavaScript框架的兴起给了许多网页设计师新的生命，为他们的网站添加了更多独特的功能。在你能发现的各种酷而有趣的功能中，最显著的是被注入到设计中的不起眼的功能lightbox（模态窗口< / >)．如果你曾经遇到过一个链接或图像，点击后会变大，屏幕的其余部分会被“阴影”聚焦在内容上，你就会知道我在说什么。

点击下面的预览图片可以看到现场演示< / >．

脚本呢?

关于为此使用客户端脚本的好处有很多要说的。虽然我们现在还没有处在一个复制粘贴的时代，这导致了许多程序员希望看到的针对JavaScript的犯罪行为，但直到今天，我们仍然对脚本和框架有一种不舒服的依赖，以使我们的网站能够正常运行。

在这种情况下，对我来说批评脚本的使用似乎有点虚伪(因为Internet Explorer用户需要启用脚本才能使用此功能)，但是和所有事情一样，我们有时需要折衷我们的代码以确保兼容性(特别是那浏览器)!

为什么不直接使用JavaScript?

就目前的脚本框架而言，我不会说它们本身就很糟糕，因为jQuery之类的框架通常会优雅地降级，但取得了不错的成功——现在你们可以把刀子和火把收起来了!然而，令人遗憾的事实是，由于安全问题、广泛的滥用和客户端脚本的潜在侵入性，很容易理解为什么很多人不(或不能)使用脚本。

因此，需要一个解决方案。希望对于CSS3的粉丝来说，您会发现这个简单、易于使用的代码是一个受欢迎的改进。

此CSS Lightbox的浏览器支持

在我们开始制作代码之前，为了给你一个快速的介绍，值得一提的是，我已经在各种浏览器中尝试了这些代码，可以肯定的说，它在Mozilla Firefox、谷歌Chrome、Apple Safari和Opera的所有最新版本中都可以工作(这都是好消息)。通过复制CSS3技术的一点不引人注目的脚本，它也可以在IE 6、7和8中平稳运行。另一个好消息是目前的测试版本IE9< / >支持CSS3，所以这可能是在不久的将来最好的无javascript解决方案。当谈到缺乏标准支持时，Internet Explorer通常是罪魁祸首。

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
 
  
CSS Lightbox
 
图片< / >但语义丰富内容< / >而且视频的< / >!
  

< div class = "lightbox" id="image"> 
  close X
 

你想提供的每个灯箱都需要一个div元素容器，其中包含id您也希望链接的属性。那id将引用需要附加到href锚来启动导航过程，不要忘记您还需要lightbox你所包含的每一个的类值。

你听懂了吗?好!有了引用灯箱的容器之后，您需要包含两个div(它将保存lightbox内容，并通过类值声明宽度和高度，如上面所示)和一个带有锚的段落作为“着色器”。

使用上面的源代码，您应该会发现自己拥有一个包含图像的工作灯箱。在本例中，我使用Six Revisions logo。考虑到可用的视口空间，您确实可以链接到任何大小的任何图像。

关于“着色器”再多讲一点

为了更好地理解这是如何得到它的视觉外观，次要div图层独立于在背景中过滤的关闭锚。这本质上是一种级联/平铺效应。第一个灯箱已经出现，它包含一个图像。

如果您查看任何现代的灯箱，您将看到最常见的特征是您有一个半透明层，它覆盖了页面的其余部分，将焦点绘制到灯箱内容。在点击这个图层时，它会返回到页面。这就是为什么每个灯箱都需要一个闭合锚的原因。

href的值应该是什么?

最棒的是你甚至可以把href如果您希望它执行关闭以外的其他操作(使用零片段链接)。

潜水器能容纳什么?

至于里面有什么div，这完全取决于你。您可以使用任何块或行内元素(lightbox将容纳任何HTML元素)。

在第一个例子中，我们有一个图像;让我们在代码中添加一些内容:

 
 
你的内容在这里!
 
Lorem ipsum dolor sit amet, concetetur adipiscing elit。我的意思是，我的意思是，我的意思是，我的意思是。在前nunc的Curabitur, vitae venenatis dui。
黄豆在黄豆上。Etiam eu nibh eros。小舌舌，小舌舌，小舌舌，小舌舌。
我是说，我是说，我是说，我是说。Cras eu sem erat, eget ultrices enim。在康沃利斯的马萨。
我很高兴见到你，我很高兴见到你，我很高兴见到你，我很高兴见到你。我很有礼貌，我很有礼貌，我很有礼貌，我很有礼貌。Donec坐见我的智人。
我是无主发酵，无主舌，无主，无主。我们的社会，我们的母亲，我们的孩子，我们的孩子。在ac massa quam。
悬浮液，调味料，调味料，调味料。我们是上等的，上等的，上等的，上等的。
 
我们的尊严，我们的眼睛，我们的眼睛，我们的眼睛，我们的眼睛，我们的眼睛。
这是一个很好的例子。我是说，我永远都不知道该怎么做。前庭连续，延伸，延伸。
我怀孕了，我有孕在身。这是我的车，我的心，我的心。tortortortor, venenatis id the result at ut, dictum nec enim。
Ut ultrices eros vel diam pulvinar aliquam不生舌菜，不生舌菜。Morbi gravida dignissim turpis eu auctor。
Morbi pelentesque urna vitae nunc dictum ementum。Aliquam erat volutpat。enean urna nibh, pretium ut伏库桑ut, luctus eget nibh。
发酵野茄汁。整数尊严dui turpis。我是自由的，我是尊严的，我是无辜的。
我爱你，我爱你。
 
Proin a dignissim orci。Nam nec urna nisi，在blandit lorem。努拉诅咒ornare rhoncus。
我不懂你，我懂你，我懂你。这是我的酒，我的灵魂。那是什么，那是什么，那是什么，那是什么。
这句话的意思是:“这句话的意思是什么?”妊娠变异性Curabitur。我是你的，我是你的，我是你的。
前肢，马来舌，永远的舌舌，调味料的智人。妊娠间期胎动。在你的额头上。
阿利卡姆诅咒我，告诉我们，这是一句格言。Sed nec libero dolor。在mi malesuada的整数。< / p > < / div > < p class = "关闭" > < a href = " # " title =“关闭这个内容Lightbox”>关闭X < span > < / span > < / > < / p > < / div >

对于所有了解假人价值的人，添加了一些Lipsum内容。

添加YouTube视频

为了让事情更圆满，让我们加入一个YouTube视频:

 
  
 
 close X
 

视频点播，灯箱里也可以用!很酷不是吗?

在这个阶段，我们已经完成了演示将使用的整个HTML文件。如果你想在浏览器中预览结果，你会注意到除了标题和段落之外，页面上还有三个信息(图像、内容块和视频)，每个信息的正下方都有一个“关闭”链接。

正对:目标

在这个阶段，您可能想知道如何确保在需要时只显示正确的内容。这是个好问题!我们将使用一个很酷的CSS3伪选择器称为:目标(基于锚的样式)。

也许你遇到过:目标选择器之前，也许不是。基本上，它巧妙地允许你应用特定的风格到一个元素，如果它id匹配片段标识符，该标识符是散列(#)符号，后面跟着通常在页面书签中找到的文本。例如:index . html #内容(你会在地址栏看到它)。

所以，闲话少说，是时候开始格式化我们的lightbox了，以便在激活这个神奇的选择器时执行所需的任务。您现在知道了为什么我们在第一部分代码中为三个链接设置了那些惟一的url(并分别给出了它们)div一个匹配的id)．片段链接最好由URL末尾的#(散列)字符表示。

对于下面的代码段，我将使用风格元素中的< >头文件的。一般来说，这是被认为是不好的做法因为所有CSS样式都应该从结构中分离出来。然而，由于这只是一个示例，而且它工作起来不显眼，所以您可以轻松地将所有样式代码放在一个外部文件中。

为了简单起见，我将保持一致。首先，我们将添加易于理解的代码片段，比如从文档中删除填充和空白。此外，我们将隐藏在屏幕外的灯箱，直到他们需要使用一些绝对定位和负边界。