Модальные окна на 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

Вызов Fancybox через атрибуты

Плагин позволяет вызвать всплывающие окна через специальные атрибуты (без вставок 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

Пример:

Вызов Fancybox через JavaScript

<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

Для 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".

Вызов Fancybox через JavaScript

<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

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

Вызов Fancybox через атрибуты

Ссылку на скрипт можно указать как в атрибуте 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

Пример:

Вызов Fancybox через JavaScript

В 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
17434
Предыдущая запись Таймер и задержка в JS

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

Михаил М Михаил М
10 апреля 2021 в 03:18
0
Как можно сделать, чтобы в окне выводился список городов, например по такому https://snipp.ru/jquery/select-search ?

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

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

Блоки со стрелками (часть 2)
В продолжении первой части, примеры как добавить стрелки к блоку с рамкой. Используются оба псевдо-элемента :before и :after.
3261
0
Блоки со стрелками (часть 1)
Добавить стрелки к блоку можно с помощью псевдо-элемента :before.
16263
+2
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
26774
+6
Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
9112
0
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
10223
+2
Аккордеон jQuery UI
jQuery UI Accordion функциональный плагин аккордеона. Рассмотрим примеры использования.
13700
+4