18

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
mpen
  • 272,448
  • 266
  • 850
  • 1,236

6 Answers6

34

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>

:)

Marçal Juan
  • 1,302
  • 14
  • 20
14

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.

T.Todua
  • 53,146
  • 19
  • 236
  • 237
Michael Shang
  • 686
  • 8
  • 9
6

you can do:

$('#login-form').submit(function(e) {
    $.fancybox({
        content: $('#access-policy').show(), 
        modal: true
    });
    return false;
});
Naftali
  • 144,921
  • 39
  • 244
  • 303
4

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.

mpen
  • 272,448
  • 266
  • 850
  • 1,236
  • 1
    or what you can do is: `$('#login-form').submit(function(e) { $.fancybox({ content: $('#access-policy').show(), modal: true }); return false; });` and still have ur orig div. (ill post this as an answer as well – Naftali Apr 27 '11 at 22:34
3

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

content: $('#access-policy').html(),
amit_g
  • 30,880
  • 8
  • 61
  • 118
2

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'
    });
});
Ronald
  • 431
  • 4
  • 8