Как программно запустить 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>

Вместо?


jquery fancybox
person mpen    schedule 27.04.2011    source источник

Ответы (6)


arrow_upward
33
arrow_downward

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

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

Вам нужно установить в свойстве 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>

:)

person Marçal Juan    schedule 12.08.2011
comment
как мы можем изменить href: '#access-policy' динамически из переменной - person Wasim A.; 25.07.2014
comment
@Wasim Это строка, поместите туда нужный селектор :) - person Marçal Juan; 15.04.2015
comment
ответ устарел. для новых версий fancybox см. ответ @Michael ниже. - person T.Todua; 06.02.2018

arrow_upward
14
arrow_downward

Другие ответы необходимо обновить

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

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

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

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

нужно изменить на

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

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

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

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

person Michael Shang    schedule 18.03.2017
comment
если вам нужна кнопка закрытия, просто удалите опцию modal: true - person jim smith; 09.12.2018
comment
Это работает для Fancybox 2 или 3: $.fancybox.open($(''#element-id)); - person Daniel; 06.01.2020

arrow_upward
6
arrow_downward

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

$('#login-form').submit(function(e) {
    $.fancybox({
        content: $('#access-policy').show(), 
        modal: true
    });
    return false;
});
person Naftali aka Neal    schedule 27.04.2011
comment
ответ устарел. для новых версий fancybox см. ответ @Michael ниже - person T.Todua; 06.02.2018

arrow_upward
4
arrow_downward

Неважно. 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>

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

person mpen    schedule 27.04.2011
comment
или что вы можете сделать, это: $('#login-form').submit(function(e) { $.fancybox({ content: $('#access-policy').show(), modal: true }); return false; }); и все еще иметь ur orig div. (я также опубликую это как ответ - person Naftali aka Neal; 28.04.2011

arrow_upward
3
arrow_downward

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

content: $('#access-policy').html(),
person amit_g    schedule 27.04.2011

arrow_upward
2
arrow_downward

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

Встроенный (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'
    });
});

Встроенный (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'
    });
});

Интерфейс:

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

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});
person Ronald    schedule 21.01.2015
comment
ответ устарел. для новых версий fancybox см. ответ @Michael ниже - person T.Todua; 06.02.2018