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">Вызов 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>Пример:
Вызов 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>Для IFrame лучше не использовать вызов через атрибуты т.к. ширина задается отдельными CSS-стилями и у окна пропадают отступы, например:
<a href="##" data-fancybox data-type="iframe" data-src="/frame.htm">
Открыть Fancybox (IFrame)
</a>Код страницы в 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>Стили для ширины окна (устанавливаются на основной странице):
.fancybox-slide--iframe .fancybox-content {
max-width: 600px;
}Пример:
Ссылки в <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>Пример:
Специально для IFrame у плагина есть вспомогательные методы:
Закрыть окно:
parent.jQuery.fancybox.getInstance().close();Обновить высоту окна по содержимому:
parent.jQuery.fancybox.getInstance().update();Еще один вариант – подгрузка контента через AJAX-запрос.
Вызов Fancybox через атрибуты
Ссылку на скрипт можно указать как в атрибуте data-src, так и в href.
<a href="#" data-fancybox data-type="ajax" data-src="/ajax.php">
Открыть Fancybox (AJAX)
</a>Код скрипта 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>Пример:
Ещё имеется полезная возможность вывести только часть полученного контента, указав 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>Пример:
Вызов 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>
Авторизуйтесь, чтобы добавить комментарий.