Inline HTML

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.

Demos

Open some HTML inside FooBox!

Open another!

Code Examples

Basic Usage

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:

  1. 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.
  2. 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:

  1. It has to have an ID that matches that of the source “a” tag exactly. In this case id=”thefooboxcontent”.
  2. It has to be hidden with inline CSS like so: style=”display:none;”.
  3. 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>

 

Leave a Reply