Адаптивные модальные окна для видео и фреймов · Colorbox

Адаптивные модальные окна для видео

Пять моделей адаптивных модальных окон Colorbox для сайта, можно загружать видео в окне или фрейм страницу, сделано описание и демо применение, окна подходят для использование вместе с Bootstrap.

Подключение и установка адаптивных окон Colorbox

Подключение окон Colorbox

Для подключения используются 3 основных элемента, внешние файлы CSS и JS не нуждаются в дополнительной настройке.

<style>@import url("//atmpl.ru/design/modal-window/2015/colorbox-1/colorbox-1.css");</style>
<script src="//atmpl.ru/design/modal-window/2015/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"90%", height:"90%"});
});
</script>
  1. Внешний файл CSS (для каждого вида окна свой файл стилей)
  2. Внешний файл .JS (для любого вида окна)
  3. Скрипт управления окном (установить ниже всего кода окна)

Установка окон Colorbox

Установка ссылок окна Colorbox

Применение класса class="iframe" предназначено для загрузки фреймов страниц, в скрипте управления можно указать размеры окна в процентах.

<a class="iframe" href="Адрес" title="Загрузка фрейма">Название ссылки</a>

Установка класса class="inline" актуально для индивидуального содержимого страницы с определённым ID, по сути ссылка является якорем, вместо адреса Вы должны вписать имя идентификатора.

<a class="inline" href="#Идентификатор" title="Загрузка участка кода">Название ссылки</a>

Установка скрипта управления окна Colorbox

Скрипт можно настроить по разному, в зависимости от элементов для которых используется окно, вариант содержимого скрипта "по умолчанию".

<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"90%", height:"90%"});
$(".inline").colorbox({inline:true, width:"90%"});
});
</script>

Параметры скрипта управления окна Colorbox

Применяйте только нужные параметры к управлению модальным окном, ниже описаны команды устанавливающие индивидуальные настройки, классу class="inline" значение высоты лучше не указывать.

$.colorbox({href:"Адрес"});
  1. После загрузки страницы в адаптивном модальном окне отобразится содержимое указанного адреса.
$.colorbox({html:"<p>Ваш текст</p>"});
  1. Отобразит текст в модальном окне сразу после загрузки страницы.
$(".inline").colorbox({inline:true, width:"90%", speed:500, transition:"fade"});
  1. Загрузка содержимого страницы
  2. Ширина окна (можно любое значение в процентах)
  3. Скорость появления 500 (можно больше или меньше, по умолчанию 350)
  4. Эффект появления окна (можно "none" - нет, "fade" - плавное, "elastic" - по умолчанию)
$(".inline").colorbox({inline:true, width:"90%", speed:500, transition:"fade", fadeOut:700});
  1. Загрузка содержимого страницы
  2. Ширина окна (можно любое значение в процентах)
  3. Скорость появления 500 (можно больше или меньше, по умолчанию 350)
  4. Эффект появления окна (можно "none" - нет, "fade" - плавное, "elastic" - по умолчанию)
  5. Скорость исчезания 700 (можно больше или меньше, по умолчанию 300)
$(".iframe").colorbox({iframe:true, width:"90%", speed:500, transition:"fade", fadeOut:700});
  1. Загрузка фрейма страницы
  2. Ширина окна (можно любое значение в процентах)
  3. Скорость появления 500 (можно больше или меньше, по умолчанию 350)
  4. Эффект появления окна (можно "none" - нет, "fade" - плавное, "elastic" - по умолчанию)
  5. Скорость исчезания 700 (можно больше или меньше, по умолчанию 300)
$(".iframe").colorbox({iframe:true, width:"90%", height:"90%", speed:500, transition:"fade", fadeOut:500});
  1. Загрузка фрейма страницы
  2. Ширина окна (можно любое значение в процентах)
  3. Высота окна (можно любое значение в процентах)
  4. Скорость появления 500 (можно больше или меньше, по умолчанию 350)
  5. Эффект появления окна (можно "none" - нет, "fade" - плавное, "elastic" - по умолчанию)
  6. Скорость исчезания 700 (можно больше или меньше, по умолчанию 300)

Демо применение 5 адаптивных модальных окон Colorbox

Предоставлено 5 модальных окон разного дизайна, при активации кода в редакторемодальное окно займёт его площадь. В качестве видео могут использоваться ссылки YouTube или Vimeo проигрывателей.

Демо адаптивного окна Colorbox 1

Демо загрузки фрейма в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо загрузки видео в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо адаптивного окна Colorbox 2

Демо загрузки фрейма в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо загрузки видео в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо адаптивного окна Colorbox 3

Демо загрузки фрейма в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо загрузки видео в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо адаптивного окна Colorbox 4

Демо загрузки фрейма в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо загрузки видео в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо адаптивного окна Colorbox 5

Демо загрузки фрейма в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Демо загрузки видео в окне Colorbox

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

В исходные файлы были внесены изменения и дополнения, адаптивные модальные окна Colorbox могут быть применены на сайте с подключенным плагином Bootstrap.

Демо испытание на странице


Рейтинг: 3.7/5 из 3



Добавлено Автор Ник Источник Просмотров Комментариев Теги
01-10-2015 Михаил Меренков aTmpl © 1316 0 adaptive window, модальные окна, окна для видео, адаптивные окна, окна для фреймов