[SOLVED] jQuery and fancybox with click event

jQuery and fancybox with click event

I just want to know if it is possible to create a fancybox, with the content of a hidden div, on a click event. This is when the button is pressed:

<input type="button" class="headerButtonNormal" id="test" value="Contact information" onmouseover=this.className="headerButtonHoover"
           onmouseout=this.className="headerButtonNormal" onclick="showFormInformation()">

Execute this javascript code and somehow generate a fancybox:

function showFormInformation(){

}

And this is the div I want to show:

<div id="inline">
Test fancybox
</div>

While searching on the internet, it seemed like fancybox isn't made for this... it is more made for link clicking. Should I use a different framework?

Solution

This is right in Fancybox's wheelhouse!

just do:

$.fancybox({
    content: $('#inline')
})

or as JFK pointed out:

$.fancybox({
    href: '#inline'
})

you should note that the css path of your hidden div will be different once it is inside your fancybox.

Check out this answer ( https://stackoverflow.com/a/3819374/599075 ) for another approach!