Библиотека FancyBox
Обычно для модальных окон я использую fancybox. Первая версия этого плагина устарела, поэтому я использую вторую, которую можно скачать на сайте: http://fancyapps.com/fancybox/
Подключение библиотеки
Подключаем наши скрипты из папки source в head, предварительно раскидав их по нужным папкам:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</head>
Как пользоваться?
Если мы хотим, чтобы при клике на маленькую картину, показывалась большая:
<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>
Если нужно сгруппировать изображения, создав эффект галереи, то вводим дополнительный атрибут rel="gallery":
<a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
<a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>
Чтобы подгрузить в модальное окно информацию, которая находится на той же странице (например, форму обратной связи):
$.fancybox('#form_bron');
Но часто бывает необходимо не просто вызвать модальное окно и вывести в него данные, но так же и задать дополнительные параметры. В этом случае нужно делать так:
$.fancybox.open('#thank-message',
{ tpl:
{
closeBtn: '<a title="Close" class="custom-close" href="javascript:;">X</a>'
}
});
В данном случаем, я кастомизировал кнопку закрытия формы, добавив ей нужный мне класс.
Но у fancybox множество полезных параметров, благодарям которым управлять модальным окно можно очень гибко. Вот к примеру:
fitToView: false - не подстраивать под размер экрана. При этом появляется вертикальная прокрутка - очень удобно в случае, если изображение слишком большое по высоте, и при попытке подогнать его под монитор (работа функции по умолчанию), можно просто не разглядеть на нём некоторые элементы.
Допускается и такой вызов:
<a id="send_form" href="#send">Отправить заявку</a> - ссылка на скрытую форму.
<div id="send">форма обратной связи</div>
$('#send_form').fancybox(); - ставим обработчик на ссылку.
Кастомизация формы
Передав дополнительные параметры, мы можем максимально кастомизировать форму. Например, убрать отступы, которые есть по умолчанию и избавить от кнопки "Закрыть" при необходимости.
$('#send_form').fancybox({
"padding": 0,
"tpl": {
"closeBtn":''
},
"height": 200,
"width": 400,
"autoSize" : false,
});
AJAX подгрузка контента
А что если мы хотим подгрузить данные с какой-то другой страницы на нашем сайте в модальном окне?
Тогда достаточно будет прописать определённый класс fancybox.ajax и сослаться на эту страничку:
<a href="/license" class="text_lic fancybox.ajax">Согласен с условиями</a>
После чего в нашем скрипте останется лишь проинициализировать этот класс.
$('.text_lic').fancybox();
Открытие модального окна внутри другого
Помню что с этой проблемой я в своё время намучался и провозился достаточно долго. Поэтому выкладываю решение здесь, в надежде что это кому-нибудь пригодится и сэкономит время:
$('.text_lic').fancybox({
beforeClose : function() {
setTimeout(function() {
$.fancybox('#form-pay');
}, 10);
return false;
}
});
Вкратце о том, что здесь происходит: при попытке открыть новое модальное окно с id="form-pay", по умолчанию старое окно fancybox c классом text_lic закрывается, что нас не устраивает. Поэтому перед закрытием формы text_lic срабатывает событие beforeClose - оно препятствует закрытию старого окна, а новое при этом открывает через 10 миллисекунд.
fancyapps-fancyBox-v2.1.5-0-ge2248f4.zip 3
SHA1: 286f394ee83a5912eb04c22587f18416bde5cf36
Вы должны авторизоваться, чтобы оставлять комментарии.
Комментарии ()