В этом уроке мы рассмотрим создание модальных окон facebox. В них может выводиться изображение, произвольный блок и даже внешний файл.
Шаг 1.
Подключим файл CSS-стилей, файл jquery, а также скрипт facebox к нашему документу, прописав следующий код между тегами head:
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="facebox.js"></script>
Шаг 2.
Далее следует прописать следующий скрипт:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'loading.gif',
close_image : 'closelabel.gif'
})
})
</script>
Шаг 3.
Чтобы вывести в модальном окне картинку, нужно написать следующий код:
<a href="stairs.jpg" rel="facebox">Появление изображения в facebox</a>
Чтобы вывести в модальном окне произвольный блок, нужно написать следующий код:
<a href="#info" rel="facebox">Появление произвольного блока в facebox</a>
Затем следует вставить в код непосредственно сам блок:
<div id="info" style="display:none;">
<p>Ваш текст</p>
</div>
Чтобы вывести в модальном окне внешний файл, нужно написать следующий код:
<a href="remote.html" rel="facebox">text</a>
Обратите внимание, что если во внешнем файле присутствуют кириллические символы, то сохранять его нужно в кодировке utf-8.
Вот все и готово! Удачного использования скрипта!