Эта инструкция поможет вам сверстать всплывающее окно (поп-ап), CSS-стили которого не будет искажать или конфликтовать со стилями вашего сайта. Вы сможете управлять настройками всплывающего окна в интерфейсе сервиса в разделе «Поп-апы».
В сервисе доступны три типа всплывающих окон:
И 2 категории:
Предназначены для сбора пользовательской информации: емейл, телефон, имя и т. д.
Оставляя емейл (и другие пользовательские данные) в поле всплывающего окна, пользователь подписывается на рассылку. После подписки он видит «спасибо-страницу» с подтверждением успешной подписки.
Класс .enpop_thanks-window
, который необходимо добавить в родительский блок с id #enpop
, отвечает за механику показа «спасибо-страницы». При добавлении одного класса меняется поведение остальных элементов.
Предназначены для оповещения пользователя о той или иной услуге/акции и т. д. «Спасибо-страницы» для такого всплывающего окна не используют.
В шаблонах всплывающих окон сервиса поп-апов предусмотрена корректная структура и классы, которые можно изменять и дополнять при необходимости. Поэтому для верстки мы рекомендуем использовать именно их.
<div id="enpop" class="container--enpop enpop_color_1 enpop_position_bottom-right"> <form class="popup--enpop" data-role="body"> <input class="popup__close-button--enpop" type="button" data-role="close" /> <div class="popup__title--enpop enpop_title">Новости недели</div> <div class="popup__text--enpop enpop_text">Оставьте емейл и мы вам напишем</div> <div class="popup__inputs-container--enpop"> <input class="inputs-container__input--enpop" name="firstName" type="text" placeholder="имя"> <input class="inputs-container__input--enpop" name="email" type="email" placeholder="емейл"> <input class="inputs-container__input--enpop" name="phone" type="tel" placeholder="телефон"> <input class="inputs-container__submit--enpop enpop_submit" type="submit" value="Подписаться"> </div> <div class="popup__accept-container--enpop"> <p class="accept-container__text--enpop">Нажимая на кнопку, вы соглашаетесь <a class="accept-container__link--enpop enpop_accept">с ссылкой</a></p> </div> </form> </div>
Обязательные:
!important
#enpop * {all: initial !important}
–enpop
для уникальности стилей.container–enpop
. Все темы с цветом, позиционированием и др. необходимо применять к нему.container–enpop
поставьте id #enpop
и все стили пропишите через него#enpop.container–enpop
и #enpop .container–enpop
data-role='overlay'
— блок фона (если есть)data-role='body'
— тело всплывающего окнаdata-role='close'
— кнопка закрытия всплывающего окнаname='firstName' type='text'
— инпут с именемname='lastName' type='text'
— инпут с фамилиейname='email' type='email'
— инпут с емейломname='phone' type='tel'
— инпут с телефономtype='submit'
— кнопка отправки формыenpop_title
— текст заголовкаenpop_text
— основной текстenpop_submit
— кнопка подписатьсяenpop_accept
— ссылка на соглашение на обработку ПДenpop_accept_container
— если есть чекбокс, оборачиваем контейнер с ПД и чекбоксом.enpop_accept a
(или к другому классу контейнера ПДн), то есть не создавая для этого классdisplay:none
, потому верхние отступы не задаются, чтобы при скрытии верстка не сломаласьenpop_position_bottom
— для всплывающих окон линийenpop_position_bottom-right
— для маленьких всплывающих оконЖелательные:
Что ещё важно:
enpop_position_top-left
enpop_position_top-right
enpop_position_bottom-left
enpop_position_bottom-right
enpop_position_top
enpop_position_bottom
enpop_position_left
enpop_position_right
enpop_offer-window
enpop_thanks-window
enpop_color_1
enpop_color_2
enpop_color_3
…
enpop_special-effect_1
enpop_special-effect_2
enpop_special-effect_3
…
Конфигурационный файл нужен для описания параметров всплывающего окна, которые можно будет изменять, а также для его правильной работы при загрузке в enKod. Заполнить нужно только часть конфига, остальное мы сделаем сами.
Примеры конфигурационных файлов можно найти в шаблонах для загрузки.
type
— тип всплывающего окна (fullscreen
/line
/small
)category
— категория всплывающего окна (collecting
/informing
)scriptSettings
— настройки, которые передаются скрипту. Если эти настройки не добавить, в редакторе нельзя будет выбрать показ спасибо-страницыthanksPageClass
— класс спасибо-страницыcontainerSelector
— контейнер, к которому нужно добавить классsettings
— общие настройкиpersonalData
— настройки ПДshow
— показывать ли по умолчанию (true
/false
)selector
— селектор для контейнера с текстом ПД (по умолчанию enpop_accept
)text
— текст ПД по умолчаниюhref
— ссылка на ПД по умолчаниюcontainerSelector
— если ссылка на ПД содержит не только текст, но и другие элементы вроде чекбокса, можно указать их общий контейнер, который будет скрываться, чтобы избежать случаев, когда скрывается текст, а чекбокс остаётся. Поле опциональноcustom
— настройки всплывающего окнаname
— описание поля, что отобразится в интерфейсе при настройке всплывающего окнаselector
— селектор для контейнера (по умолчанию 'enpop_title
/enpop_text
/enpop_submit
)param
— меняемое свойство (textContent
/value
/innerHTML
/style.width
)value
— значение поля по умолчаниюtype
— тип (text
)themes
— темы оформленияvalue
— цветовая схема по умолчанию (enpop_color_1
)selector
— селектор (container–enpop
)enum
color
— цвет темы для предпросмотраclass
— класс цветовой схемы (enpop_color_Х
)fields
— Настройка динамически добавляемых полей формы
Внимание. Если указать поле inputContainerSelector
, то его содержимое автоматически очистится, и рендериться будут только те поля, которые указаны в настройках.
fieldClass
— класс, с которым добавляется поле вводаinputContainerSelector
— селектор контейнера, в который будут добавляться поляenum
name
— название поля (email
/phone
/firstName
/lastName
)placeholder
— название поля, которое будет видеть пользовательrequired
— обязательно ли поле к заполнению (true
/false
)positions
— темы оформленияvalue
— позиция по умолчаниюselector
— селектор (ontainer–enpop
)enum
aligment
— позиция (top-left
/top-right
/bottom-left
/bottom-right
)class
— класс позицииthanksPage
— настройки текста для спасибо-страницыname
— описание поля, что отобразится в интерфейсе при настройке всплывающего окнаselector
— селектор для контейнера (по умолчанию enpop_title
/enpop_text
/enpop_submit
)param
— изменяемое свойство (textContent
/value
/innerHTML
/style.width
)value
— значение поля по умолчаниюtype
— тип (text
)