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

Question

Я хочу, чтобы 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>

Вместо?

Answer 1

Для FancyBox v3 или более поздней версии см. этот ответ

Для старых версий:

Вам необходимо установить в href свойство div ID. Если вы используете $('#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>

:)

Answer 2

Остальные ответы необходимо обновить

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

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

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

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

должна измениться на

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

Обратите внимание на метод open и href-> src change.

Без открытия вы получите fancybox - это не ошибка функции.Без «src» вы получите запрошенный контент, который не может быть загружен во всплывающем окне.

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

Answer 3

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

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

Answer 4

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>

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

Answer 5

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

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

Answer 6

Это демонстрирует, как использовать 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'
    });
});