How to programmatically trigger fancybox with an inline div?

Question

I want to make a fancybox appear when someone tries to submit a form. So I've got this:

$('#login-form').submit(function(e) {
    $.fancybox({
        content: '<h2>Hello Fancybox</h2>',
        modal: true
    });
    return false;
});

Works good, but I'd rather use my div than trying to specify all the HTML in the content string. Can I make it popup with this

<div style="display:none" id="access-policy">
blah blah blah
</div>

Instead?

Answer 1

For FancyBox v3 or later see this answer

For old versions:

You need to set in href property the div ID. If you use $('#access-policy').show() in content property the second time you open this fancybox will show nothing.

$('#login-form').submit(function(e) {
    $.fancybox({
        href: '#access-policy', 
        modal: true
    });
    return false;
});

Also in the HTML has to be:

<div style="display:none">
    <div id="access-policy">
        blah blah blah
    </div>
</div>

:)