Категория:
Опубликовано:

Всплывающие окна. Colorbox

Colorbox modal

Очень часто у новичков возникает потребность выводить тот или иной контент во всплывающем окне.

Решил выложить инструкцию на эти случаи.

Основы

И так, нам понадобятся модули:

Качаем и устанавливаем согласно инструкций.

Теперь, для того чтоб вывести контент во всплывающем окне, достаточно добавить к ссылке на страницу с нужным контентом класс colorbox-node:

<a class="colorbox-node" href="/about">About</a>

После подобной манипуляции, нажав на ссылку откроется стандартное окно Colorbox с содержимым, находящемся по этой ссылке.

Обратите внимание, страница будет выведена без стандартных регионов Drupal, только основной контент страницы. Если нужно выводить полную страницу, или страницу другого сайта, можно использовать класс colorbox-load или colorbox-inline.

Дополнительно у нас есть возможность манипулировать размерами открываемого окна, добавив к ссылке параметры ширины и высоты:

<a class="colorbox-node" href="/about?width=600&height=400">About</a>

Теперь окно Colorbox откроется с размерами 600x400 px.

Так же можно указывать атрибут rel, и таким образом объединять несколько ссылок в галерею:

<a class="colorbox-node" rel="gallery" href="/about?width=600&height=400">About</a>

Добавление ссылок во Views

Рассмотрим как можно добавить ссылку из Представлений.

Для полей, которые можно выводить в качестве ссылки есть предустановленные настройки вывода в Colorbox:

Показать ссылку в Colorbox

Но, к счастью, Views'ом можно сделать ссылкой любое поле.

Для этого, в настройках поля включаем "Перезаписать результаты -> Выводить это поле в виде ссылки" и просто разносим все атрибуты по полям:

Открыть ссылку во всплывающем окне
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.

Комментарии

Спасибо, и надеюсь на продолжение.

Приходилось ли Вам делать прикреплять кнопки "поделиться в соц сетях" на подобные colorbox страницы? У меня есть такая задача, но реализовать пока не получилось. Индексируется контент не открывающего модального окна, а страницы, что под ним...

Благодарю, хорошая статья, всё чётко и понятно

Добавить комментарий