Плагин ColorBox и Iframe

Ещё одна неохваченная обзором функция jQuery плагина ColorBox - это работа с фреймами.
Все мы знаем про фреймы и наслышаны об их пользах и недостатках. Фремы бывают внутренними (когда выводится страница со своего же домена) и внешние (кроссдоменные фреймы).
Два важных качества фреймов: они индексируются Яндексом (это и хорошо и плохо, по ситуации) и легко внедряются в тело статьи. Правда в нашем, рассматриваемом случае, поисковик никаких фреймов не увидит, а только ссылку, которую можно просто прикрыть атрибутом nofollow.

ColorBox работает с фреймами и выводит их выводит их также во всплывающем/модальном окне, как и любой другой поддерживаемый контент.

Можете посмотреть демку:


Посмотреть рекламу!

Собственно, сфера применения для фреймов довольно широкая (часто используются в рекламе), особенно это касается Blogger, где нет возможности создавать пустые страницы, и нет файлового пространства. Демо я накидал по-быстрому: размеры относительные, в процентах. Для более точного результата, думаю, лучше использовать размеры в пикселях.

Установка в Blogger.
1) Выполням три шага из установки, описанной в статье "Модальное окно и скрытый текст с помощью ColorBox".

2) Настроечный скрипт будет таким:

<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"50%", height:"30%", scrolling: false});
});
</script>

Где:

• width и height // ширина и высота, указываются в процентах (%) или пикселях (px)
• scriolling //функция прокрутки, если содержимое модального окна не умещается в самом окне

Остальные опции перечислены здесь.
Скрипт можно разместить прямо на странице, где планируется использование ссылки на модальное окно с фреймом.

3) Понадобится внешний хостинг, на который нужно поместить html-страничку (та, что будет выводиться во фрейме). Страничку накидаете в любом html_редакторе. Не забудьте про кодировку документа (UTF-8).

4) HTML код - ссылка на окно с фреймом будет выглядить так:

<a class='iframe' href="ваша_страница_на_хостинге.html" rel="nofollow">Посмотреть рекламу!</a>

Полезная ссылка:
htmlbook.ru - Теги HTML - Тег <iframe>.