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

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

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

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

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

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

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

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

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

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

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

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

          4. Я нашел причину. 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 вставлять в мод. окно , а остаток игнорировать скриптом ?

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

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

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

  3. Здравствуйте.
    Подскажите плз, почему если я загружаю через фейсбокс другую страничку, а именно форму с капчей, у меня картинки капчи не загружаются? Видимо им надо где-то путь перепрописать, но никак не могу понять где? Спасибо.

    1. Попробуйте для начала просто вставить любую картинку. Если картинка загрузится искать причину нужно не в модальных окнах, а в коде капчи. И еще попробуйте капчу без модального окна.

Добавить комментарий для Андрей Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Изображения должны быть включены!