This instruction will help you to layout a pop-up, which CSS styles will not distort or conflict with the styles of your site. You will be able to manage pop-up settings in the service interface in the “Pop-ups” section.
Three types of pop-ups are available in the service:
And 2 categories:
Designed to collect user information: email, phone number, name, etc.
By leaving an email address (and other user data) in the field of the pop-up window, the user subscribes to the newsletter. After subscribing, he/she sees a “thank you page” with a confirmation of successful subscription.
Class .enpop_thanks-window
which should be added to the parent block with id #enpop
class is responsible for the mechanics of showing the “thank you page”. Adding one class changes the behaviour of the other elements.
Designed to inform the user about a particular service/promotion, etc. “Thank you page” is not used for such a popup.
Pop-up service pop-up templates have the correct structure and classes, which can be modified and supplemented if necessary. Therefore, we recommend using them for layout.
<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>
Mandatory:
!important
#enpop * {all: initial !important}
–enpop
to make the styles unique..container–enpop
. All themes with colour, positioning, etc. should be applied to it.container–enpop
put id #enpop
and write all styles through it.#enpop.container–enpop
и #enpop .container–enpop
data-role='overlay'
- background block (if any)data-role='body'
- popup bodydata-role='close'
- button to close the pop-up windowname='firstName' type='text'
- input with namename='lastName' type='text'
- surname inputname='email' type='email'
- email inputname='phone' type='tel'
- phone inputtype='submit'
- form submit buttonenpop_title
- title textenpop_text
- body textenpop_submit
- subscribe buttonenpop_accept
- link to the agreement on processing of personal dataenpop_accept_container
- if there is a checkbox, wrap the container with the PD and the checkbox..enpop_accept a
(or another class of the PDN container), i.e. without creating a class for itdisplay:none
so the top indents should not be set, so that the layout will not break when it is hiddenenpop_position_bottom
- for line popupsenpop_position_bottom-right
- for small pop-upsDesirable:
What else is important:
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
…
Configuration file is needed to describe the popup parameters that can be changed, as well as for its proper operation when loaded into enKod. Only part of the config file needs to be filled in, we will do the rest ourselves.
Examples of configuration files can be found in the download templates.
type
- popup type (fullscreen
/line
/small
)category
- pop-up category (collecting
/informing
)scriptSettings
- settings that are passed to the script. If you don't add these settings, you won't be able to choose to display a thank you page in the editorthanksPageClass
- thanksPage classcontainerSelector
- container to which you want to add a classsettings
- general settingspersonalData
- PD settingsshow
- whether to show by default (true
/false
)selector
- selector for the container with the AP text (by default enpop_accept
)text
- default AP texthref
- default PD linkcontainerSelector
- If the AP link contains not only text but also other elements like a checkbox, you can specify their common container to be hidden to avoid cases where the text is hidden but the checkbox remains. Field optionalcustom
- popup settingsname
- description of the field that will be displayed in the interface when customising the pop-up windowselector
- selector for the container (by default 'enpop_title
/enpop_text
/enpop_submit
)param
- changeable property (textContent
/value
/innerHTML
/style.width
)value
- default field valuetype
- type (text
)themes
- design themesvalue
- default colour scheme (enpop_color_1
)selector
- selector (container–enpop
)enum
colour
- theme colour for previewclass
- colour scheme class (enpop_color_X
)fields
- Configuring dynamically added form fields
Warning. If you specify a field inputContainerSelector
field, its contents will be automatically cleared and only those fields specified in the settings will be rendered.
fieldClass
- class with which the input field is addedinputContainerSelector
- selector of the container to which fields will be addedenum
name
- field name (email
/phone
/firstName
/lastName
)placeholder
- name of the field the user will seerequired
- whether the field is required (true
/false
)positions
- design themesvalue
- default positionselector
- selector (ontainer–enpop
)enum
aligment
- position (top-left
/top-right
/bottom-left
/bottom-right
)class
- position classthanksPage
- text settings for thanks pagename
- description of the field that will be displayed in the interface when setting up the pop-up windowselector
- selector for the container (by default enpop_title
/enpop_text
/enpop_submit
)param
- modifiable property (textContent
/value
/innerHTML
/style.width
)value
- default field valuetype
- type (text
)