Best way to display Javascript/Div based hover windows?

Question

I'm talking about the Ibox sort. I.e, user clicks a link and a small javascript based div hovers up containing a small form or such.

I will want to give users a <script> tag which they would place in their website. Then, they would put the required javascript function in their <a href> tag which they want to use for displaying the form. E.g they would put:

<a href="javascript:mysite_signUpForm();">
Create an account on [My site's name]</a>

Here mysite would be replaced by the name of my website, obviously.

The main requirement here is that it should be able to display off-site urls in the form. I.e, it should receive a url and load up the contents of that url in its div. Also, changing the background/border color, etc should be easy. And the more visually appealing, the better.

Any suggestions?

Also, if its height will be expanded/reduced as more content is loaded/hidden, it would be best

Answer 1

Well, if you use jquery, you could use the facebox plugin. So, once you do that, you can just make the link like so:

<a href="http://site.name.com/page.html" rel="facebox">Link content</a>

Then intialise the plugin like so:

  $('a[rel*=facebox]').facebox()

This will load the remote content at site.name.com/page.html in the div and show it.

Apart from this, there are loads of other lighbox plugins for jquery.