是否可以使用 jQuery slimbox2 显示带有文本而不是图像的 div？答案

【问题标题】：Is it possible to use jQuery slimbox2 to display divs with text instead of images?是否可以使用 jQuery slimbox2 显示带有文本而不是图像的 div？
【发布时间】：2011-04-18 10:18:30
【问题描述】：

您好，我正在尝试在单击链接时在模态/灯箱类型窗口中显示一些文本内容。我选择 slimbox2 是因为它很轻巧，但它似乎只用于显示图片和图片库。

有没有办法让它在点击链接时显示一个 Div？或者任何人都可以推荐一个可以满足我需要的插件吗？

谢谢大家

这是我的代码：

var sidetwos = $('div.side2'); var 翻转链接 = $('a.flip'); Fliplinks.each（函数（索引，对象）{ $(this).click(function() { $(sidetwos[index]).fancybox(); }); });

【问题讨论】：

我在使用 slimbox2 时一无所获，所以我决定尝试 fancybox.net。我设法让模态内容窗口显示，但它忽略了为父页面 css 文件中的内容定义的 css！请问有什么建议吗？
解决了，样式没有被应用，因为父容器被替换为模态窗口wrapepr。现在效果很好，6kb（压缩）它只比 slimbox2（4kb 压缩）大一点！

标签： jquery-plugins html modal-dialog lightbox

【解决方案1】：

好吧，没有其他人可能会接受这个，所以我会发布我的解决方案......

我决定使用FancyBox jQuery 插件（正如我在评论中提到的），它让事情变得更容易！

我有一系列“名片”类型的 DIV，其中显示一个徽标和一些联系方式以及更多信息的链接。该链接附加到 fancybox js 调用，信息 DIV 使用 rel= 库引用分组，以允许在它们之间导航，而无需打开和关闭每个模式框！

HTML：

<a href="#offerDescription-$id" class="flip" rel="offer-description">Show Details &raquo;</a>

<div id="offerDescription-$id" class="lightbox">
    <img class="offerlogo" src="http://www.everyone-benefits.co.uk/images/logos/$logo.jpg" />
    <h2>$Title</h2>
    <p class="description">$Text</p>
</div>

Javascript：

$(function() { // jQuery 'domready' 简写 $('a.flip[rel=offer-description]').fancybox(); });

无意光顾：

请注意，HTML 部分中使用的$ 符号仅暗示信息来自 PHP，并不代表实际的 PHP 代码！

【讨论】：