[jona-jrgen]

I just want to know if it is possible to create a fancybox, with the content of a hidden div, on a click event. Like this When 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 isnt made for this… it is more made for link klicking. Should I use a different framework???

[andbdrew]

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!

[darshanags]

Try:

HTML:

<input type="button" class="headerButtonNormal" id="test" value="Contact information"
onmouseover=this.className="headerButtonHoover" onmouseout=this.className="headerButtonNormal">
<div id="inline">Test fancybox</div>

jQuery:

$("#test").on("click", function () {
    showFormInformation();

    return false;
});

function showFormInformation() {
    $.fancybox({
        content: $("#inline").html()
    });
}

Fiddle here

You might want to move your inline event handlers to be bound using jQuery since you are already using the library.

[Author]

Posts