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