Использование модальных окон на сайте

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Понять, что представляют из себя модальные окна лучше на визуальном примере ЗДЕСЬ.

1. Подготовка материала

В зависимости от того, что Вы желаете разместить в модальных окнах, необходимо подготовить либо картинки или фотографии, либо видеоролик, либо текст. Изображения необходимо иметь в двух вариантах, большого и малого размеров. Это Вы поняли, посмотрев пример размещения окон. В образце, например, малые изображения имеют ширину 180px., а большие, соответственно, 600px. Размеры в дальнейшем можно изменять, кому как нравится. Изменить размеры изображений можно с помощью специальных программ, но проще всего это сделать в программе Adobe Photoshop или Paint.net:

Видеоролики можно вставлять как свои, используя для этой цели программы, например Microsoft Office SharePoint Designer 2007, Adobe Dreamweaver, сервисы, о которых рассказано на этой странице, так и из СЕТИ, просто скопировав КОД.

Для размещения текста (контента) в модальном окне необходимо вначале подготовить отдельный HTML-файл с необходимым текстовым материалом, картинками и прочим по желанию.

Так как мы будем рассматривать все три случая возможного использования модальных окон, поэтому предположим, что весь материал Вы подготовили.

Если у Вас пока нет своего материала, скачайте архив с файлами, которые также будут необходимы в нашем дальнейшем обучении:

Распакуйте архив в отдельную папку. Открыв эту папку с названием modalwindows Вы увидите папки code, fancybox, images.

В папке code содержатся шаблоны для вставки текста, видео и изображений. Папка fancybox содержит все ява-скрипты, картинки и таблицу стилей, а папка images тестовые изображения в двух вариантах, как говорилось ранее. Файл index.html - это полностью готовый файл, открыв который в браузере, Вы сможете увидеть все варианты окон в работе. Ну и файл content.html - это тот файл с контентом, о котором говорилось ранее.

На этом подготовка рабочего материала закончена.

2. Подключение элементов к сайту

Папку fancybox копируем в «корневую» папку сайта. Содержимое папки images копируем в папку с изображениями, обычно она так же называется images.

Открываем HTML-документ, в который мы будем монтировать модальные окна и вставляем между тегами head следующий код:

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
    $("a.first").fancybox(); 
    $("a.two").fancybox(); 
    $("a.video").fancybox({"frameWidth": 520,"frameHeight": 400});
    $("a.content").fancybox({"frameWidth": 600,"frameHeight": 300});
});
</script>

Разные элементы выделены отдельными цветами. Первая строка - это подключение таблицы стилей.
Три последующие - это ява-скрипты.
Далее идёт скрипт управления элементами, которые мы будем монтировать, а именно: одиночная картинка, группа изображений, видео и контент соответственно.
Всё это хорошо видно на рисунке кода.

В случае, если Вы не планируете работать со вставкой видео в «окно», участок кода
$("a.video").fancybox({"frameWidth":520,"frameHeight":400}); не пишите, и, соответственно, когда не возникает необходимость размещения контента, опускаем часть кода для его старта, а именно
$("a.content").fancybox({"frameWidth":600,"frameHeight":300});.

Я намеренно упростил задачу, предоставив полный набор необходимых элементов кода, чтобы было легче, удобнее и быстрее работать. Просто нужно вставить этот код между тегами head и особо не заморачиваться на деталях, но некоторые из них всё же мы рассмотрим, но немножко позже.

Одиночное изображение в модальном окне

В то место на странице вашего сайта между тегами body, где Вы желали бы видеть маленькую картинку, которая при нажатии будет открываться в модальном окне, вставляем следующий код:

<a class="first" title="Цветы на фоне неба" href="images/flower600.jpg"><img src="images/flower180.jpg" border="0"></a>

Выделенный текст (названия и файлы изображений) заменяем своим.

Вот что у нас получилось:

Замечательно! С одиночной картинкой справились. Идём дальше...

Серия изображений

Для показа нескольких изображений в модальных окнах используем этот код:

<a class="two" rel="group" title="Первая картинка группы" href="images/moon600.jpg"><img src="images/moon180.jpg" border="0"></a>
<a class="two" rel="group" title="Вторая картинка группы" href="images/shell600.jpg"><img src="images/shell180.jpg" border="0"></a>
<a class="two" rel="group" title="Третья картинка группы" href="images/sun600.jpg"><img src="images/sun180.jpg" border="0"></a>

Копируем этот код, вставляем точно также, как и в первом варианте. И вот что получаем в итоге:

Симпатично получается. Изображения открываются в модальных окнах, стрелки для просмотра работают.

Параметры при вызове fancybox

Сейчас рассмотрим некоторые параметры, которые влияют на внешний вид и поведение при открытии модальных окон.

В html-коде, который нужно вставлять в раздел head вместо участка кода:

	
$("a.first").fancybox(); 
$("a.two").fancybox(); 

вставим следующий код, присвоив класс, например, gallery тегу <a>:

$("a.gallery").fancybox( 
{						
"padding" : 20,
"imageScale" : true, 
"zoomOpacity" : false,
"zoomSpeedIn" : 0,	
"zoomSpeedOut" : 0,	
"zoomSpeedChange" : 0, 
"frameWidth" : 600,	 
"frameHeight" : 450, 
"overlayShow" : true, 
"overlayOpacity" : 0.5,	
"hideOnContentClick" :true,
"centerOnScroll" : false
}
);

Практически, получается, что код, выделенный зеленым цветом, нужно вставить между скобками (). Не забудьте поменять класс (first или two) на gallery в разделе body.

Что может меняться при вставке этого кода?

• padding - отступ изображений от краев окна;
• imageScale - если установлено значение true - изображение масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - true;
• zoomOpacity - изменение прозрачности контента во время анимации (по умолчанию false);
• zoomSpeedIn - скорость анимации в мс при увеличении фото (по умолчанию 0);
• zoomSpeedOut - скорость анимации в мс при уменьшении фото (по умолчанию 0);
• zoomSpeedChange - скорость анимации в мс при смене фото (по умолчанию 0);
• frameWidth - ширина окна, px (425px - по умолчанию);
• frameHeight - высота окна, px (355px - по умолчанию);
• overlayShow - если true, то затенят страницу под всплывающим окном. Цвет задается в jquery.fancybox.css - div#fancy_overlay (по умолчанию true);
• overlayOpacity - прозрачность затемнения (0.3 по умолчанию);
• hideOnContentClick - при значении true закрывает окно по клику по любой его точке (кроме элементов навигации). По умолчанию true;
• centerOnScroll - когда установлено true, то окно центрируется на экране, когда пользователь прокручивает страницу.

3. Видеоролик в модальном окне

    

<a class="video" href="#testube">Посмотрите этот видеоролик</a>
  <div style="display: none" id="testube">
   HTML-код ролика
   </div>

   

И как прежде, выделенное маркером - это переменные составляющие.

Результат смотрим в демо-примере.

В архиве, который вы скачали ранее есть папка parameters.txt, в которой представлены различные настройки для строки
$("a.video").fancybox({"frameWidth":560,"frameHeight":340}); Она у нас вверху, помните? Можно эти настройки менять, но, я думаю, что двух основных, а именно, ширина и высота вполне хватит.

Когда Вы будете просматривать результаты своей работы на разных браузерах, увидите, что на Opera, Mozilla, Safari и Хроме размеры видеоролика и модального окна совпадают, при условии выставления оригинальных размеров, а вот в замечательном IE дело обстоит не так хорошо. Там, почему-то, ролик никак не вписывается в окно. Но, как говорится, «четверо против одного», поэтому я в настройках выставляю размеры заявленные в ролике.

4. Текст в модальном окне

Ну и наконец рассмотрим размещение контента в наших окнах. Если по какой-либо причине вы желаете, чтобы текст открывался в отдельном окне на затемнённом фоне основной страницы, вставляйте в нужное место этот код:

<a class="content" href="content.html">Пример размещения контента в модальном окне</a>

content.html - это, как говорилось ранее, самостоятельный, заблаговременно подготовленный HTML-файл, который загружается на ваш сайт, а ссылку на него прописываете в данном коде. Файл изображения, который желаете приобщить к тексту также нужно загрузить в папку images.

Получается следующее:

Размер окна регулируем в строке
$("a.content").fancybox({"frameWidth": 600,"frameHeight": 300});

Вот и всё. Мы научились размещению картинок, текста и видеороликов в модальных окнах. Это вовсе не сложно. Теперь вы сможете вполне реально применять свои знания и наработки на практике. Удачи! Всего Вам доброго! С уважением, Л.М.