Inline HTML really opens FooBox up for unlimited possibilities. You can put opt-in forms in there, complex tables, simple messages. The sky’s 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:
<code><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:
<code><div id=”thefooboxcontent” style=”display: none;”><p>Your content…</p></div>