Question

我遇到了这个灯箱插件，想到在我的项目中实现它。我可以选择在我的应用程序中导出数据。当我点击导出链接时，我希望灯箱出现一些文本和按钮，如导出到Excel，导出到文本文件等。

但灯箱插件是否只覆盖图像？如果没有，我怎么能超过text和div元素？

这是导出链接：

<a class="button" id="export_entries">Export</a>

这是我想要出现在灯箱中的div元素。

<div id="lightboxContent">
<div class="info">
    <h2>Export Options</h2>
    <div>How would you like that?</div>
</div>

<div class="stuff">
    <p class="center">
        <a class="button" title="Excel Document" href="#">Excel(.xls)</a>

        <a class="button" title="Tab Delimited"  href="#">Text(.txt)</a>


    </p>
</div>

编辑1

我尝试了另一个名为facebox的灯箱插件，该插件可以选择在灯箱中加载html文件。但对我来说，html文件作为新页面加载。任何人都可以帮助我吗？

我已经给出了以下代码：

<script type="text/javascript" src="/FormBuilder/app/webroot/js/jquery.js"></script>
<script type="text/javascript" src="/FormBuilder/app/webroot/js/facebox/facebox.js"></script>
 <link type="text/css" rel="Stylesheet" href="/FormBuilder/app/webroot/css/facebox/facebox.css" media="screen,projection" />

<a class="button" rel="facebox" id="export_entries" href="/lightbox.html" >Export</a>

Answer 1

您可以调整灯箱以包含任何HTML。它所做的一切都是背景，并将一些HTML放到前台的一个分区中。

您可以通过查看Expose来节省一些时间，这是jQuery工具的一部分：

http://flowplayer.org/tools/demos/index.html

Answer 2

LightBox插件用于仅覆盖图像。所以我去了Thickbox插件，可以用来叠加图像，文本，HTML和Ajax内容。

我们可以用JQuery灯箱插件覆盖文本和div元素吗？

2 个答案: