我们可以使用 JQuery lightbox 插件叠加文本和 div 元素吗？
我偶然发现了这个灯箱插件，并考虑在我的项目中实现它。我可以选择在我的应用程序中导出数据。当我单击导出链接时，我希望灯箱中出现一些文本和按钮，例如导出到 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>
I came across this lightbox plugin and thought of implementing it in my project. I have an option of Exporting data in my application. When I click the export link, I want the light box to appear with some text and buttons like Export to excel,export to text file etc.
But will the light box plugin overlay only images? If not, how can I over text and div elements?
This is the export link:
<a class="button" id="export_entries">Export</a>
This is the div element that I want to appear in the lightbox.
<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>
EDIT 1
I tried another lightbox plugin called facebox, which had an option of loading a html file in the lightbox. But for me,the html file is loaded as a new page. Can anyone help me?
I've given the code below:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以调整灯箱以包含任何 HTML。它所做的只是清空背景并将一些 HTML 放入前景的分区中。
您可以通过查看 Expose 来节省一些时间，它是 jQuery 工具的一部分：
http:// flowplayer.org/tools/demos/index.html
You can adapt the lightbox to contain any HTML. All it does is blank out the background and put some HTML into a division in the foreground.
You might save some time by checking out Expose, which is part of the jQuery tools:
http://flowplayer.org/tools/demos/index.html
LightBox 插件仅用于覆盖图像。所以我选择了 Thickbox 插件，它可以用来覆盖图像、文本、html 和 Ajax 内容。
The LightBox plugin is used to overlay only images. So I went for Thickbox plugin which can be used to overlay images,text,html and Ajax content.