Недавно столкнулся с темой использующей модальные окна 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 в модальном окне









