Вчера я получил комментарий к записи LightWindow от читателя Юрия. Суть его просьбы состояла в том, чтобы вместо изображения получить форму в модальном окне. Первоначально я пытался адаптировать скрипт под любой другой контент, потом понял, что это пустая трата времени, ведь велосипед уже изобретён, и рационально будет, если этой возможностью мы воспользуемся.

Решение было найдено всё в том же FancyBox, если раньше мы использовали его в качестве галереи, то теперь - в качестве модальных окон. Статью разбил на два этапа: во-первых, основная настройка FancyBox, во-вторых, заточка под форму. Ладно, меньше слов - больше дела.

Настройка FancyBox

Шаг №1

Подключаем JS-скрипты, находящиеся в папке 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"/>

Шаг №2

Вставляем 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>

Шаг №3

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

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

После этого создаём страницу text.html и вставляем в нею произвольный текст. Общая настройка на этом готова.

Форма в модальном окне FancyBox

Шаг №1

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

<form class="forms" method="post" name="form" action="file.php">
<p>Имя:<br/><input name="name" size="40" type="text"/></p>
<p>Фамилия:<br/><input name="nickname" size="40" type="text"/></p>
<p>Текст:<br/><textarea name="text" cols="50" rows="20"></textarea></p>
<input name="submit" class="button" type="submit"/>
</form>

Тем, кто не знает, что такое формы, советую ознакомиться с их построением.

Шаг №2

Теперь придадим форме немного стилей. Для этого поместите следующий код в style.css:

.forms {
font:14px Georgia;
color:#333333;
margin-left:130px;
}
.forms input,textarea {
border:1px solid #cccccc;
background-color:#f6f6f6;
padding-left:8px;
}
.forms .button {
background-color: #dee0ff;
width:100px;
height:30px;
font: bold 14px Arial;
color:#999999;
}

Примечание

В последнее время замечаю, что у многих возникают проблемы по установке данных скриптов. Всё делов в директориях, то есть у меня изображения для FancyBox находятся в папке images/fancybox/, у вас могут находиться и вовсе в другом месте, аналогично и с JS-фреймворками. Поэтому если у вас появились проблемы, сразу же открывайте каждый файл и тщательно анализируйте пути, которые прописаны в файлах.