2009-08-21 11 views
0

Je suis tombé sur ce plugin lightbox et j'ai pensé à l'implémenter dans mon projet. J'ai une option d'exportation de données dans mon application. Lorsque je clique sur le lien d'exportation, je veux que la boîte à lumière apparaisse avec du texte et des boutons comme Exporter pour exceler, exporter vers un fichier texte, etc.Peut-on superposer des textes et des éléments div avec le plugin JQuery lightbox?

Mais le plugin de boîte à lumière ne superposera-t-il que des images? Si non, comment puis-je sur les éléments texte et div?

C'est le lien d'exportation:

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

Ceci est l'élément div que je veux apparaître dans la visionneuse.

<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

J'ai essayé un autre plugin appelé lightbox facebox, qui avait une option de chargement d'un fichier html dans la visionneuse. Mais pour moi, le fichier html est chargé comme une nouvelle page. Quelqu'un peut-il m'aider?

J'ai donné le code ci-dessous:

<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> 

Répondre

1

Le plugin LightBox est utilisé pour recouvrir uniquement les images. Donc je suis allé pour Thickbox plugin qui peut être utilisé pour superposer des images, du texte, du HTML et du contenu Ajax.

1

Vous pouvez adapter la visionneuse pour contenir un code HTML. Tout ce qu'il fait est de vider l'arrière-plan et de mettre du code HTML dans une division au premier plan.

Vous pourriez gagner du temps en vérifiant Expose, qui fait partie des outils jQuery:

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

+0

'Expose' est génial! Merci beaucoup pour cette astuce. –

Questions connexes