Вывод блока в попапе с автоопределением размера контента

Аватар пользователя Tinnka Tinnka 27 марта 2018 в 17:06
2

Задача:
При клике по ссылке вывести блок в попапе без указания размера попапа (т.е. размер попапа должен быть равен содержимому попапа).

Решение:

  1. Вывести блок на странице обычным способом (блок можно сформировать с помощью Views при необходимости) и скрыть его в CSS:
    .footer #block-views-contacts-block {
      display: none;
    }
  2. Установить модуль colorbox.
    В настройках colorbox отметить галочкой "Включить Colorbox для inline-элементов".
  3. Сформировать и вывести в нужном месте ссылку клик по которой будет отображать нужный блок в попапе.
    <a class="colorbox-inline" href="?inline=true#block-views-contacts-block">Контакты</a>
  4. Тематизировать попап добавив отступы внутри блока и окрасив его в нужный цвет (по умолчанию прозрачный)
    #block-views-contacts-block {
      padding: 0 20px 20px;
      background-color: white;
    }
  5. Наслаждайтесь :)
    Контакты в попапе

P.S. Если вы хотите задать фиксированный размер попапа то ссылка может выглядеть так:

<a class="colorbox-inline" href="?width=500&height=500&inline=true#block-views-contacts-block">Контакты</a>

Но в этом случае фон нужно задавать для попапа а не для блока.

ВложениеРазмер
Иконка изображения Результат9.62 КБ
Иконка изображения Настройки Colorbox155.56 КБ

Комментарии

Аватар пользователя Tinnka Tinnka 31 марта 2018 в 11:48
1

Продолжение, о том как скрыть полосы прокрутки для основного содержимого при открытии popup читаем тут.

Аватар пользователя Tinnka Tinnka 23 января в 19:16

Если включить colorbox_node, то для вывода вебформы во попапе colorbox, достаточно будет сформировать ссылку:
<a class="colorbox-node" href="novyy-otzyv?width=600&height=300">Новый отзыв</a>