Inline HTML really opens FooBox up for unlimited possibilities. You can put opt-in forms in there, complex tables (perhaps even a FooTable!), simple messages. The sky is the limit.
To launch some basic inline html in FooBox you need to add at least the following 2 properties to your “a” tag, as well as adding your target html content with some custom styling. First, your “a” tag needs to have the following:
- The href needs to point to the div ID of the content you want to load. Ideally, you’ll put that div at the bottom of your page.
- You need to add target=”foobox” to the “a” tag as well.
An example of the simplest implementation of the “a” tag is the following:
<a href="#thefooboxcontent" target="foobox">Simple HTML content in FooBox</a>.
Next you need to have a div with the content that you want to show in FooBox. That div has to have the following 3 things to work properly:
- It has to have an ID that matches that of the source “a” tag exactly. In this case id=”thefooboxcontent”.
- It has to be hidden with inline CSS like so: style=”display:none;”.
- There has to be another tag immediately inside the div wrapping all of the content. It can be another div, or simply a p tag, but all the inside content has to also have a wrapper.
Here’s an example of the div that the previous link would point to:
<div id="thefooboxcontent" style="display: none;"><p>Your content…</p></div>
Join Our Newsletter!
Some reasons why you should stay in the loop:
- Stay informed about new releases
- Make sure your site is bug free and secure
- New themes and features released all the time
- Get special offers on other plugins
Another HTML FooBox!
now… with captions!