0

При расположении нескольких идентичных ссылок на странице перестает корректно работать открытие PopUp с инлайн-контентом: появляется на секунду и исчезает, причем, остается затемненный фон.

Если ссылка одна, то все ок. Ссылка:

<a data-fancybox="forms" data-src="#order-popup" href="javascript:;"></a>

Инициализация:

 $('[data-fancybox="forms"]').fancybox({
        infobar: false,
        touch: {
            vertical: false, 
            momentum: false
        }
    });

Скрытый блок:

<div class="order-popup hide" id="order-popup">Содержимое</div>

При расположении нескольких ссылок в адресной строке уже не site.ru/#forms, а site.ru/#forms-1 site.ru/#forms-2 и т.д.

1 ответ 1

0

Из оф источника, имена класов надо чтоб были прикручены, только так он их групирует вместе... Вот держите пример.

If you want to use the same script for all your images/elements then use classes instead.

 $(document).ready(function() {
	/* Apply fancybox to multiple items */
	$('.grouped_elements').fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.js"></script>

<a class="grouped_elements" rel="group1" href="http://expres.ua/gfx/news/gugl_10.png">1</a>
<a class="grouped_elements" rel="group1" href="http://expres.ua/gfx/news/gugl_10.png">1</a>
<a class="grouped_elements" rel="group1" href="http://expres.ua/gfx/news/gugl_10.png">1</a>
<a class="grouped_elements" rel="group1" href="http://expres.ua/gfx/news/gugl_10.png">1</a>

<div class="order-popup hide" id="order-popup">Содержимое</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.