Задача:
При клике по ссылке вывести блок в попапе без указания размера попапа (т.е. размер попапа должен быть равен содержимому попапа).
Решение:
-
Вывести блок на странице обычным способом (блок можно сформировать с помощью Views при необходимости) и скрыть его в CSS:
.footer #block-views-contacts-block {
display: none;
} -
Установить модуль colorbox.
В настройках colorbox отметить галочкой "Включить Colorbox для inline-элементов". - Сформировать и вывести в нужном месте ссылку клик по которой будет отображать нужный блок в попапе.
-
Тематизировать попап добавив отступы внутри блока и окрасив его в нужный цвет (по умолчанию прозрачный)
#block-views-contacts-block {
padding: 0 20px 20px;
background-color: white;
} -
Наслаждайтесь
P.S. Если вы хотите задать фиксированный размер попапа то ссылка может выглядеть так:
Но в этом случае фон нужно задавать для попапа а не для блока.
Вложение | Размер |
---|---|
![]() | 9.62 КБ |
![]() | 155.56 КБ |
Комментарии
Продолжение, о том как скрыть полосы прокрутки для основного содержимого при открытии popup читаем тут.
В тему, ещё более расширенный функционал:
Colorbox Node
How to make colorbox responsive
Спасибо, пригодиться.
Если включить colorbox_node, то для вывода вебформы во попапе colorbox, достаточно будет сформировать ссылку:
<a class="colorbox-node" href="novyy-otzyv?width=600&height=300">Новый отзыв</a>