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

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

Контент модального окна находится на этой-же странице в срытом <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
			}
		}
	});
});
JS

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

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

Кнопку «закрыть» можно заменить своей, добавив параметр 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
			}
		}
	});
});
JS

Чтобы текст окна постоянно не висел в коде страницы, можно получать его через 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
			}
		}
	});
});
JS

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

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

Подходит для форм, т.к. при отправки формы обновиться только 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
			}
		}
	});
});
JS

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

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

Чтобы закрыть окно своей кнопкой, нужно обращаться к 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, то достаточно добавить 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
			}
		}
	});
});
JS
19.09.2019, обновлено 05.12.2021
16547

Комментарии

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

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

Как обновить iframe
Перезагрузить iframe на странице можно с помощью JS или jQuery следующими методами.
11715
+4
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
53717
+21
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
189250
+27
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
16047
+3
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
30307
+31
Использование API Яндекс Диска на PHP
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
44283
+16