Войти через loginza
Закрыть панель

5

мая

2010

Модальные окна facebox

Распечатать статью Разместил: spider. Рубрика WebDesign | 26 коммент. »

Недавно столкнулся с темой использующей модальные окна facebox.
Довольно интересное решение.
Наверное все уже встречали окна типа lightbox — красивые всплывающие окна с картинками. При помощи lightbox можно делать как отдельные картинки , так и целые галереи.
Но есть в этом и один минус — показывать в этих окнах можно только картинки.
Facebox — это такие же всплывающие окна, как и lightbox только с одним большим отличием : загружать в них можно как картинки, так и текст, код, да и вообще почти все что угодно.
Facebox работает на jQuery — т.е. для ее работы необходимо подключить эту библиотеку версии не ниже 1.2.1.
Скачать facebox можно тут.

<script src="/js/jquery.js" type="text/javascript"></script>

Далее подключаем сам скрипт и его стили:

<!-- facebox start  -->
<link href="/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/js/facebox/facebox.js" type="text/javascript"></script>
<!-- facebox end -->

А так же скрипт по которому понятно, что окно должно быть модальным:

<!-- facebox rel=    -->
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'loading.gif',
close_image   : 'closelabel.gif'
}) 
})
</script>
<!-- facebox rel= end -->

Чтоб вывести произвольный текст модальном окне пишем следующий код:

<a rel="facebox" href="#info">Появление произвольного блока в facebox</a>
<div id="info" style="display: none;">
Ваш текст
</div>

Пример блока :
Появление произвольного текстового блока в facebox

Чтобы загрузить удаленную страничку в модальном окне пишем :

<a rel="facebox" href="remote.html">text</a>

Пример robots.txt в модальном окне