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

25 комментариев

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

25 thoughts on “Модальные окна facebox”

  2. Эта технология похожа на всплывающие окна , но в отличии от последних не блокируются браузером.
    К тому же очень красиво :) и функционально.

  3. с вин-1251 кодировкой не дружит. в окне кракозябры. где и что прописать.

  4. Читаем документацию — работает только с utf-8 — это если делать iframe.
    При обычном выводе — дружит хорошо. А вот если внешнюю страницу подгружать — то только utf-8.

  6. А это и работает в вордпресс. Сайт у меня именно на нем.
    Попробуйте еще раз прочитать статью.
    Скрипты ложим в подпапку темы и прописываем полный путь к ним.
    Вывод окна — в посте.

  7. В данном примере используется скрипт выполняемый на серверной стороне ? У меня на Yandex-narod работает страшно коряво. То не догружается контент в IE и FF, то загружается и далее пытается уйти на другую страницу в ОПЕРЕ . Как решить проблему.

  8. Скрипт выполняется у клиента — это основа javascript.
    На "Народе" разрешают использовать java-скрипты ?
    Посмотреть бы код — подкружаете ли Вы на странице библиотеку jQuery, правильно ли прописаны классы и прочее.
    У себя на машине проверьте может стоять банерорезка ) проверьте с другой машины Ваш сайт.

  9. Посмотрите здесь пожалуйста http://teleodessa.narod.ru/ntv.htm ( Щелкните по названию любого канала ) . Правда тут не facebox , но его я тоже использовал с идентичным результатом. Только iFrame работает.

  11. на локалке работает на всех браузерах. На других машинах как и на моей не работает правильно с удаленного узла ( сервера НАРОД ).

  12. Почитайте документацию — как правильно использовать Pretty, и как правильно передавать в нео Ajax-контент.
    Сразу не скажу , но мне кажется что только iframe и будет работать.
    Из модальных окон попробуйте использовать fancybox — мне он понравился больше.
    И с Ajax точно работает.

  13. Спасибо за совет. Fancybox пробовал , отлично работает , но Ajax только на локалке. Дошло до того , что я тупо вставил ДЕМО на сайт удалив со страницы все остальное. Результат тот же. Все работает , кроме Ajax.Я уже не знаю что делать. Может вместо Ajax использовать iFrame. Или что другое порекомендуете для загрузки в модальные окна внешних файлов. Спасибо!

  14. т.е. с Fancybox такие же симптомы ?
    Тогда вариантов 3:
    1. Переходите на платный хостинг;
    2. Используйте API Fancybox или Pretty для подгрузки ajax-контента;
    3. Используйте iFrame для подгрузки внешних файлов.

  15. Заметил , что в Googl Chrome работает отлично на любом компе..Что бы это значило ?

  16. Я нашел причину. Yandex в запрашиваемый вншний файл вставляет свой фрагмент кода с рекламой.
    Вот он :
    </textarea></form>
    </title></comment>
    </div></span></ilayer></layer></iframe></noframes></style></noscript></table></script></applet></font>
    <style>
    #bn {display:block;}
    #bt {display:block;}
    </style>
    <div style="background:url (http://www.tns-counter.ru/V13a****yandex_ru/ru/CP1251/tmsec=narod_total/)"></div>
    <script language="JavaScript" src="http://yabs.yandex.ru/show/163"></script&gt;
    <!— mailto:spm111@yandex.ru —>
    Подскажите , как избавиться от вредоносного влияния кода Yndex ?
    Существует какой-нибудь метод вырезать рекламу при приеме . Или может указывать какой DIV вставлять в мод. окно , а остаток игнорировать скриптом ?

  17. Видимо никак :(
    Смотрите п.1. Сменить хостинг — без рекламы который.
    Или говорите с народом — возможно при проплате есть возможность рекламу убрать.

  19. Подскажите пожалуйста, можно ли как-нибудь действие facebox привязать к кнопке input, как к ссылке?

  22. У меня ещё один вопрос;)
    А как сделать чтобы у внутренних ссылок и кнопок тоже работал facebox? Т.Е. человек нажал на ссылку и оно перетрансформировалось в следующее окно
    Хочется чтобы процесс продолжался в окне, пока человек не нажмет "закрыть"..

Комментарии закрыты.