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">Контент модального окна находится на этой-же странице в срытом <div>. Ссылки в модальном окне открываются в основном окне браузера.
В href ссылки указывается id скрытого блока с контентом.
<a href="#modal-1" class="modal-inline">Открыть окно</a>
<div id="modal-1" style="display: none;">
<p><strong>Контент из скрытого div</strong></p>
...
</div>$(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>$(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, с отдельного URL.
<a class="modal-ajax" href="https://example.com/ajax">Открыть окно с AJAX</a>Контент отдельной страницы:
<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>$(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. Но контент окна должен быть со своей HTML разметкой и стилями.
<a class="modal-iframe" href="https://example.com/frame">Открыть окно iFrame</a>Код страницы в 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>$(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>Ссылки в <iframe> будут открываться в нём, для перехода в основном окне к ссылке потребуется добавить атрибут target="_top".
<a target="_top" href="https://example.com">Ссылка</a>Если требуется перезагрузить родительскую страницу после закрытия 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
}
}
});
});
