Popup-окно на лендинге Платформы LP: гибридное решение

Добрый день! Как сделать popup-окно на лендинге Платформы LP? И чтобы она появлялась в определенной позиции и не закрывалась пока не оставят Email. Форма должна затемнять фон, чтобы другой текст был не читаем. При прокрутке страницы обратно наверх, надо убирать всплывающее окно. Также надо учесть, что нужна интеграция со Smartresponder. — Константи, Нарьян-Мар

Стандартными средствами платформы этого сделать, к сожалению, нельзя. Причина тому, что модальное окно на лендинге закрывается при клике по layout (за пределами popup-окна) и есть кнопка закрытия (крестик). У меня был готовый скрипт модального окна с затемнением фона, но ее интегрировать со Smartresponder — лишняя работа. Да и формы править вручную, плюс php-скрипт на другом хостинге. Все это муторно! Нужно было изящное решение. =)

Мне не удалось переопределить функции отвечающие за закрытие встроенного модального окна самой Платформы, поэтому решил сделать гибридное решение.

Установка Popup-окна на лендинге

1.) В BODY добавить следующий код

Скрипты в body Плафтормы LP


Из кода убрал комментарии, т.к. из-за них в конструкторе иногда возникают ошибки.

#ppform — стили popup-окна лендинга, отвечающие за позицию на экране.
#overlay — вывод подложки, которая затемняет фон блокируя содержимое под ней. Здесь «opacity:0.95;» отвечает за степень прозрачности слоя.

2.) Добавим id=»ppshow» для любой одной секции, при скролле до которого будет вызываться popup-окно на лендинге.

ID секции (якорь) Platform LP
3.) Добавим id=»pphide» для любой одной секции, при скролле до которого будет скрываться popup-окно на странице. Находится эта секция всегда выше предыдущей (#ppshow).

Настройка ID секции platformlp

 

4.) Добавим в наш проект META-HTML и впишем в него код:

Рекомендую добавить в секцию, над которым она будет появляться.

META-HTML Платформы LP

5.) Добавляем class=»topindex» для секции в котором находится META-HTML. Это чтобы форма и оверлей были выше всех блоков. Для этого класса задан z-index в наших стилях. Без этого скорее всего ваше popup-окно будет перекрыто элементами секции.

Class topindex в платформе лендинга

6.) В META-HTML добавим любые интересующие вас элементы (формы, текст, видео и т.д.).

Popup-окно на лендинге. META-HTML

Теперь публикуем страницу и прокручиваем до появления popup-окна. При прокрутке вверх окно исчезает. А главное невозможно получить информацию пока не отправить Email (имеется в виду рядовым пользователям).

Остается сделать так, чтобы после отправки формы окно больше не блокировало страницу. У нас есть решение этой задачи. Просто оставьте заявку нашим специалистам. Заказать

P.S.: Решение также протестировано в Mac OS на Safari.

Демо

[Всего голосов: 3    Средний: 3.7/5]
Ильдар Хайрисламов

Ильдар Хайрисламов

Если что-то не получается сделать из описания статьи или требуется помощь специалиста, пишите мне, вместе разберемся. Мои услуги: IDOBI.PRO