views:

1393

answers:

2

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>
+1  A: 

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

Sohnee
'Expose' is great! Many Thanks for this tip.
Jim G.
+1  A: 

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.

Angeline Aarthi