Как программно запускать fancybox с встроенным div?

Я хочу создать fancybox, когда кто-то попытается отправить форму. Итак, у меня есть это:

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

Хорошо работает, но я бы предпочел использовать мой div, чем пытаться указать весь HTML в строке содержимого. Могу ли я сделать всплывающее окно с этим

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

Вместо

Ответ 1

Вам нужно установить в свойстве href идентификатор div. Если вы используете $('#access-policy').show() в свойстве content, второй раз, когда вы откроете этот fancybox, ничего не покажет.

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

Также в HTML должно быть:

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

Ответ 2

вы можете сделать:

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

Ответ 3

Nevermind. content может быть объектом jquery:

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

Но div необходимо обернуть в скрытый div,

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

В противном случае ничего не появится; он не изменяет свойство отображения.

Ответ 4

Контент - это "любой HTML", поэтому получите HTML из Div и передайте его в контент

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

Ответ 5

Это демонстрирует, как использовать fancybox, не требуя элемента ссылки <a href>.

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'
    });
});

Ответ 6

Другие ответы должны быть обновлены, потому что я использовал принятый код ответа и царапал себе голову на полчаса.

В последнем FancyBox 3 они изменили некоторые имена опций и способы использования некоторых методов.

Более старая версия о том, как открыть встроенный элемент:

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

необходимо изменить на

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

Обратите внимание на открытый метод и изменение href- > src.

Без открытия вы получите fancybox не является функцией ошибки. Без "src" вы не сможете загрузить запрошенный контент.

Надеюсь, что это поможет кому-то избежать моих же ошибок, и нам нужно ПОСЛЕДОВАТЬ ДОКУМЕНТАЦИЮ на этом. Это намного сложнее быть устаревшим.