FancyBox как модальные окна

FancyBox как модальные окна

06.01.201197801knyazsergei

FancyBox – это именно та изюминка, которая встречается на многих популярных сайтах в разных «костюмах», но совсем не встречается на сайтах новичках. Такие окна очень удобны, ведь порой на сайте просто не хватает места, но нужно уместить ещё несколько страниц, и тогда-то на помощь приходит FancyBox.

Установка

Подключаем скрипты, находящиеся в папке js (их нужно скачать) , и таблицу стилей style.css:


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>

Вставляем jQuery-код, настройки которого влияют на внешний вид модального окна. Каждая строка прокомментирована, поэтому проблем не возникнет.

<script type="text/javascript">
$(document).ready(function() {
$("a.gallery, a.iframe").fancybox();
$("a.modalbox").fancybox(
{  
"frameWidth" : 400,  
"frameHeight" : 400  
});
$("a.gallery2").fancybox(
{  
"padding" : 20, // отступ контента от краев окна
"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE
"zoomOpacity" : false, // изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 1000, // скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" : 1000, // скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : 700, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600, // высота окна, px(355px - по умолчанию)
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay  
"overlayOpacity" : 0.8, // Прозрачность затенения (0.3 по умолчанию)
"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE  
"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу  

});  
$("#menu a, .anim").hover( function() {
$(this).animate({"paddingLeft" : "10px"}, 300)},
function() {$(this).animate({"paddingLeft" : "0"}, 300);
});
$("a.iframe").fancybox(
{  
"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600 // высота окна, px(355px - по умолчанию)  
});
});
</script>

Прописываем две ссылки: одна будет вести на страницу с обычным текстом, а вторая - на форму, и добавляем каждой класс gallery2. Если не надо открывать страницу в модальном окне, то класс не прописываем:


<p><a class="gallery2" href="text.html">Текст в модальном окне</a></p>
<p><a class="gallery2" href="form.html">Форма в модальном окне</a></p>

После этого создаём страницу text.html и вставляем в нею произвольный текст. Основная работа уже проделана, осталось лишь создать файл form.html, который будет содержать HTML-код формы.




Сохраните в социальную сеть
Комментарии (1)
VlAd 23.04.2011 в 18:16Спам
Класс!!!!! Спасибо
1
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт