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

$('#login-form').submit(function(e) 开发者_JAVA百科{
    $.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?

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>

:)

The other answers need to be updated

because I was using the accepted answer's code and was scratching my head for half an hour.

In the most recent FancyBox 3, they have changed some option names and how to use some methods.

The older version on how to open an inline element:

$.fancybox({ // OUTDATED
    href: '#element-id', 
    modal: true
});

needs to change to

$.fancybox.open({ // FancyBox 3
    src: '#element-id', 
    modal: true
});

Notice the open method and the href->src change.

Without the open you will get a fancybox is not a function error. Without "src" you will get a requested content cannot be loaded popup.

Hope this help someone to avoid my same mistakes and we do need to FOLLOW THE DOCUMENTATION on this one. That's much harder to be outdated.

you can do:

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

Nevermind. content can be a jquery object:

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

But the div has to be wrapped in a hidden div,

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

Otherwise nothing will appear; it doesn't change the display property.

Content is "any HTML", so get the HTML from the Div and give it to content

content: $('#access-policy').html(),

This demonstrates how to use fancybox without requiring the <a href> link element.

Inline (1.3.4):

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'content': '#dialogContent'
    });
});

Inline (2.1.5):

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'href': '#dialogContent'
    });
});

Iframe:

<div id="menuitem" class="menuitem"></div>

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});