jQuery and fancybox with click event

Question

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???

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

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!

edited May 23 '17 at 12:14

Community

1
1

answered Mar 10 '13 at 17:53

Andbdrew

11,788
4
33
37

... or better `$.fancybox({href: "#inline"});` – JFK Mar 10 '13 at 19:12

score 0 · Answer 2 · answered Mar 10 '13 at 18:05

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.

... or better `$.fancybox({href: "#inline"});` – JFK Mar 10 '13 at 19:14 — JFK, Mar 10 '13 at 19:14

jQuery and fancybox with click event

2 Answers2