Модальные окна на Fancybox 3

Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.

Документация: http://fancyapps.com/fancybox/3/docs/#options
GitHub: https://github.com/fancyapps/fancybox

Подключение через CDN:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
HTML
1

Плагин позволяет вызвать всплывающие окна через специальные атрибуты (без вставок JS-кода):

<a data-fancybox href="#hidden">Открыть Fancybox (Inline)</a>

<div style="display: none; width: 500px;" id="hidden">
	<h2>Контент из скрытого div</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim
		vulputate eros. 
	</p>
	<p>
		Donec hendrerit efficitur ex vitae euismod. Maecenas ut leo vitae ipsum dictum 
		cursus vel vitae nulla.
	</p>
</div>
HTML

Пример:

<a href="#" id="btn">Открыть Fancybox (Inline)</a>

<div style="display: none; width: 500px;" id="hidden">
	<h2>Контент из скрытого div</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim
		vulputate eros. 
	</p>
	<p>
		Donec hendrerit efficitur ex vitae euismod. Maecenas ut leo vitae ipsum dictum 
		cursus vel vitae nulla.
	</p>
</div>

<script>
$('#btn').click(function(){
	$.fancybox.open({
		src: '#hidden',
		type: 'inline'
	});
});
</script>
HTML
2

Для IFrame лучше не использовать вызов через атрибуты т.к. ширина задается отдельными CSS-стилями и у окна пропадают отступы, например:

<a href="##" data-fancybox data-type="iframe" data-src="/frame.htm">
	Открыть Fancybox (IFrame)
</a>
HTML

Код страницы в iFrame:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Модальное окно Fancybox 3 в iFrame</title>
</head>
<body>
	<h2>Контент из iFrame</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim
		vulputate eros, at tempus velit vestibulum vitae. Donec hendrerit efficitur
		ex vitae euismod. Maecenas ut leo vitae ipsum dictum cursus vel vitae nulla. 
	</p>
</body>
</html>
HTML

Стили для ширины окна (устанавливаются на основной странице):

.fancybox-slide--iframe .fancybox-content {
	max-width: 600px;
}
HTML

Пример:

Ссылки в <iframe> будут открываться в нём, для перехода в основном окне к ссылке потребуется добавить атрибут target="_top".

<a href="##" id="btn">
	Открыть Fancybox (IFrame)
</a>

<script>
$('#btn').click(function(){
	$.fancybox.open({
		type: 'iframe',		
		src: '/frame.htm',
		smallBtn: true,
		iframe: {
			preload: false,
			css: {
				width: '600px'
			}		
		}
	});
});
</script>
HTML

Пример:

Специально для IFrame у плагина есть вспомогательные методы:

Закрыть окно:

parent.jQuery.fancybox.getInstance().close();
JS

Обновить высоту окна по содержимому:

parent.jQuery.fancybox.getInstance().update();
JS
3

Еще один вариант – подгрузка контента через AJAX-запрос.

Ссылку на скрипт можно указать как в атрибуте data-src, так и в href.

<a href="#" data-fancybox data-type="ajax" data-src="/ajax.php">
	Открыть Fancybox (AJAX)
</a>
HTML

Код скрипта ajax.php

<div style="width: 600px;">
	<h2>Контент из AJAX</h2>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim
		vulputate eros, at tempus velit vestibulum vitae. Donec hendrerit efficitur
		ex vitae euismod. 
	</p>
	<?php echo date('d.m.Y H:s:i'); ?>
</div>
PHP

Пример:

Ещё имеется полезная возможность вывести только часть полученного контента, указав jQuery селектор нужного элемента в атрибуте data-filter.

<a href="#" data-fancybox data-type="ajax" data-filter="h2" data-src="/ajax.php">
	Открыть Fancybox 1
</a>

<a href="#" data-fancybox data-type="ajax" data-filter="p" data-src="/ajax.php">
	Открыть Fancybox 2
</a>
HTML

Пример:

В JS API, фильтр по селектору (data-filter) почему-то не реализован.

<a href="#" id="btn">Открыть Fancybox (AJAX)</a>

<script>
$('#btn').click(function(){
	$.fancybox.open({
		type: 'ajax',		
		src: '/ajax.php'
	});
	return false;
});
</script>
HTML

Пример:

31.01.2021, обновлено 10.03.2024
63898
Предыдущая запись Таймер и задержка в JS
Следующая запись Знак рубля в HTML/CSS

Комментарии 3

Михаил М Михаил М
10 апреля 2021 в 03:18
Как можно сделать, чтобы в окне выводился список городов, например по такому https://snipp.ru/jquery/select-search ?
avcore Avcore avcore Avcore
24 октября 2022 в 18:02
Здравствуйте! Хороший сайт, добавил в закладки. У меня вопрос по запуску мультимодальных окон Flashbox с нескольких ссылок на видео на текущей странице. Использовал классы hidden1, hidden2 и hidden3. У меня звук смешивается, а видео накладывается пирогом друг на друга. Прощу помочь.
Андрей Хирнов Андрей Хирнов
13 ноября 2022 в 20:23
Для фильтра в последнем примере нужно добавить параметр filter : '#element'. Тогда будет браться контент только из этого дива.

, чтобы добавить комментарий.

Другие публикации

Блоки со стрелками (часть 2)
В продолжении первой части, примеры как добавить стрелки к блоку с рамкой. Используются оба псевдо-элемента :before и :after.
6611
0
Блоки со стрелками (часть 1)
Добавить стрелки к блоку можно с помощью псевдо-элемента :before.
26670
+2
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60077
+7
Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
19214
-1
Аккордеон jQuery UI
jQuery UI Accordion функциональный плагин аккордеона. Рассмотрим примеры использования.
23785
+7
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
14871
+3