HTML, Text or Form Data In A LightBox PopUp?

(4 posts) (3 voices)

1. 

   MacMyDay
   Member

   I want to create a link that is not unlike a Tooltip, except that I would want it to be more of a lightbox effect (sans toolbar, scrolling etc.) that I could use to collect data through a form (ala Boxy) or to display stylized text(HTML). I know there is a wordpress plug in called FancyZoom that provides this effect on IMAGES on a global basis, but I'm wondering what the best way to handle this in InFocus for text, and form input?

   Posted 9 months ago #
2. 

   Ruderic
   Support

   Hello,

   In the "Edit Page" screen, activate the HTML tab, so you can edit the source code of your content directly.

   Now, you have to create a "div" that will contain the HTML content of your lightbox. For example:

   <div id="my-lightbox" style="display:none">
      <form>...</form>
   </div>

   Then, you need the link that triggers the popup. This is how you have to create it:

   <a rel="prettyPhoto" href="#my-lightbox">My Link</a>

   As you can see, the href attribute of the link is an anchor for the ID that I assigned to the previous "div".

   Posted 9 months ago #
3. 

   MacMyDay
   Member

   Ruderic - Excellent. Got it. So within that div and after the display:none"> I can insert anything i want:

   1) Image
   2) shortcode (such as the form)
   3) html formatted text

   ?

   Posted 9 months ago #
4. 

   Elliott
   Support

   Hello MacMyDay,

   Yes you should be able to. See here, http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/, and click on their "inline content" example to see it in action.

   Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.