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

19.09.2019

24865

Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.

Подключение:

<script src="/jquery.min.js"></script>
<script src="/fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css">

HTML

Контент из inline блока

Контент модального окна находится на этой-же странице в срытом <div>. Ссылки в модальном окне открываются в основном окне браузера.

В href ссылки указывается id скрытого блока с контентом.

<a href="#modal-1" class="modal-inline">Открыть окно</a>

<div id="modal-1" style="display: none;">
	<p><strong>Контент из скрытого div</strong></p>
	...
</div>

HTML

$(function(){
	$(".modal-inline").fancybox({
		margin: 0,
		padding: 20,
		maxWidth: 400,
		autoScale: true,
		transitionIn: 'none',
		transitionOut: 'none',
		type: 'inline',
		helpers: {
			overlay: {
				locked: false
			}
		}
	});
});

Размер окна можно указать в процентах:

$(function(){
	$(".modal-inline").fancybox({
		margin: 0,
		padding: 20,
		maxWidth: '90%',
		maxHeight: '90%',
		autoScale: true,
		transitionIn: 'none',
		transitionOut: 'none',
		type: 'inline',
		helpers: {
			overlay: {
				locked: false
			}
		}
	});
});

Кнопку «закрыть» можно заменить своей, добавив параметр closeBtn: false и ссылку с методом $.fancybox.close().

Также можно отключить закрытие кликом по фону параметром modal: true.

<a href="#modal-1" class="modal-inline">Открыть окно</a>

<div id="modal-1" style="display: none;">
	<a href="#" onclick="$.fancybox.close(); return false;">Закрыть</a>
	<p><strong>Контент из скрытого div</strong></p>
	...
</div>

HTML

$(function(){
	$(".modal-inline").fancybox({
		closeBtn: false,
		modal: true,
		margin: 0,
		padding: 20,
		maxWidth: 400,
		autoScale: true,
		transitionIn: 'none',
		transitionOut: 'none',
		type: 'inline',
		helpers: {
			overlay: {
				locked: false
			}
		}
	});
});

Контент из ajax

Чтобы текст окна постоянно не висел в коде страницы, можно получать его через AJAX, с отдельного URL.

<a class="modal-ajax" href="https://example.com/ajax">Открыть окно с AJAX</a>

HTML

Контент отдельной страницы:

<p><strong>Контент из AJAX</strong></p>
<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. 
	Proin ultrices, risus at dapibus pellentesque, urna orci vehicula sem, quis 
	congue ante ex in risus. Donec quis vestibulum lectus, a semper nulla. 
	Nullam luctus sodales neque, eget vehicula orci laoreet at. 
</p>

HTML

$(document).ready(function() {
	$(".modal-ajax").fancybox({
		margin: 0,
		padding: 20,
		maxWidth: 400,
		autoScale: true,
		transitionIn: 'none',
		transitionOut: 'none',
		type: 'ajax',
		helpers: {
			overlay: {
				locked: false
			}
		}
	});
});

Вызов без ссылки:

$.fancybox({
	href: 'https://example.com/ajax',
	margin: 0,
	padding: 20,
	maxWidth: 400,
	autoScale: true,
	transitionIn: 'none',
	transitionOut: 'none',
	type: 'ajax',
	helpers: {
		overlay: {
			locked: false
		}
	}
});

Контент в iFrame

Подходит для форм, т.к. при отправки формы обновиться только iFrame. Но контент окна должен быть со своей HTML разметкой и стилями.

<a class="modal-iframe" href="https://example.com/frame">Открыть окно iFrame</a>

HTML

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta http-equiv="content-language" content="ru">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Модальное окно Fancybox 2 в iFrame</title>
</head>
<body>
	<p><strong>Контент из iFrame</strong></p>
	<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. 
		Proin ultrices, risus at dapibus pellentesque, urna orci vehicula sem, quis 
		congue ante ex in risus. Donec quis vestibulum lectus, a semper nulla. 
		Nullam luctus sodales neque, eget vehicula orci laoreet at. 
	</p>
</body>
</html>

HTML

$(document).ready(function() {
	$(".modal-iframe").fancybox({
		margin: 0,
		padding: 20,
		width: 400,
		autoScale: false,
		transitionIn: 'none',
		transitionOut: 'none',
		type: 'iframe',
		helpers: {
			overlay: {
				locked: false
			}
		}
	});
});

Вызов без ссылки:

$.fancybox({
	href: 'https://example.com/frame',
	margin: 0,
	padding: 20,
	width: 400,
	autoScale: false,
	transitionIn: 'none',
	transitionOut: 'none',
	type: 'iframe',
	helpers: {
		overlay: {
			locked: false
		}
	}
});

Чтобы закрыть окно своей кнопкой, нужно обращаться к Fancybox через родителя parent.

<a href="#" onclick="parent.$.fancybox.close(); return false;">Закрыть</a>

HTML

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

<a target="_top" href="https://example.com">Ссылка</a>

HTML

Перезагрузка при закрытии Fancybox

Если требуется перезагрузить родительскую страницу после закрытия Fancybox, то достаточно добавить callback-функцию afterClose().

$(function(){
	$(".modal-iframe").fancybox({
		margin: 0,
		padding: 20,
		maxWidth: 400,
		autoScale: true,
		transitionIn: 'none',
		transitionOut: 'none',
		type: 'iframe',
		afterClose  : function() { 
			window.location.reload();
		},
		helpers: {
			overlay: {
				locked: false
			}
		}
	});
});