Пример JavaScript поп-апа

// Весь CSS и HTML код поп-апа находится в строке
var popupContent = '<style>\
@import url(\'https://fonts.googleapis.com/css?family=Open+Sans:300,400|PT+Sans&subset=cyrillic-ext\');\
#cqPopup {\
  width: 100%;\
  height: 100%;\
  position: fixed;\
  left: 0;\
  top: 0;\
}\
.cq-popup__bg {\
  background: rgba(51, 51, 51, 0.8);\
  cursor: pointer;\
  height: 100%;\
  left: 0;\
  position: fixed;\
  top: 0;\
  width: 100%;\
  z-index: 1;\
}\
.wrapper__body {\
  justify-content: center;\
  align-items: center;\
  width: 100%;\
  height: 100%;\
}\
.cq-popup__body {\
  background-color: #FFF;\
  border-radius: 0px;\
  border: none;\
  box-shadow: 0px 1px 14.3px 0.8px rgba(0, 0, 0, 0.5);\
  box-sizing: border-box;\
  font-family: \'Open Sans\', sans-serif;\
  justify-content: center;\
  max-width: 600px;\
  padding: 30px;\
  position: relative;\
  top: 0px;\
  width: 90%;\
  z-index: 2;\
}\
.cq-popup__body * {\
  box-sizing: border-box;\
}\
.cq-popup__close {\
  background: rgba(0, 0, 0, 0.40);\
  border-radius: 100px;\
  box-sizing: content-box;\
  color: #fff;\
  font-family: \'PT Sans\', sans-serif;\
  font-size: 12px;\
  height: auto;\
  padding: 3px 3px 3px 24px;\
  right: 0px;\
  top: -29px !important;\
  width: 51px;\
  position: absolute;\
  z-index: 99;\
  cursor: pointer;\
}\
.cq-popup__close:hover {\
  background: rgba(0, 0, 0, 0.60);\
}\
.cq-popup__close:before {\
  -webkit-font-smoothing: subpixel-antialiased;\
  background-image: url(\'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDcgKDQ1Mzk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5DbG9zZS1zbWFsbDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJTdW5Tb2NoaSwtZnVsbC1wb3B1cC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTM1MS4wMDAwMDAsIC05NC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IkNsb3NlLWJ0biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMzOS4wMDAwMDAsIDg3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkNsb3NlLXNtYWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4wMDAwMDAsIDUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IkJvdW5kcyIgeD0iMCIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuNSwyLjUgTDIuNSw5LjUiIGlkPSJMaW5lLUNvcHkiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjAwMDAwMCwgNi4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTYuMDAwMDAwLCAtNi4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMi41IEwyLjUsOS41IiBpZD0iTGluZS1Db3B5LTIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==\');\
  background-repeat: no-repeat;\
  content: " " !important;\
  height: 10px !important;\
  left: 10px !important;\
  position: absolute !important;\
  top: 6px !important;\
  width: 10px !important;\
}\
.wrapper {\
  display: flex;\
}\
.wrapper-col {\
  flex-direction: column;\
}\
.wrapper-row {\
  flex-direction: row;\
}\
.cq-popup__text {\
  color: #000;\
  font-size: 16px;\
  font-weight: 300;\
  line-height: 25px;\
  margin: 0;\
  padding: 0;\
  text-align: center;\
  width: 100%;\
}\
.cq-popup__text-h1 {\
  font-size: 24px;\
  font-weight: 300;\
  line-height: 28px;\
  margin-bottom: 14px;\
}\
.cq-popup__text-h2 {\
  font-size: 22px;\
}\
.cq-popup__form {\
  flex-wrap: wrap;\
  margin: 0;\
  width: 100%;\
}\
.cq-popup__form_title {\
  align-items: flex-start;\
  margin-bottom: 23px;\
}\
.cq-popup__form_content {\
  align-items: center;\
}\
.cq-popup__form_inputs {\
  align-items: flex-start;\
  justify-content: center;\
}\
.cq-popup__input {\
  background: transparent;\
  border: 1px solid #000000;\
  border-radius: 0px;\
  color: #000000;\
  font-size: 14px;\
  font-weight: 400;\
  margin-bottom: 17px;\
  padding: 10px 14px;\
  width: 100%;\
}\
.cq-popup__input:focus {\
  outline: none;\
}\
::-webkit-input-placeholder {\
  color: #999999;\
  font-size: 14px;\
  font-weight: 300;\
  line-height: normal;\
}\
::-moz-placeholder {\
  color: #999999;\
  font-size: 14px;\
  font-weight: 300;\
  line-height: normal;\
}\
/* Firefox 19+ */\
:-moz-placeholder {\
  color: #999999;\
  font-size: 14px;\
  font-weight: 300;\
  line-height: normal;\
}\
/* Firefox 18- */\
:-ms-input-placeholder {\
  color: #999999;\
  font-size: 14px;\
  font-weight: 300;\
  line-height: normal;\
}\
:focus::-webkit-input-placeholder {\
  color: transparent\
}\
:focus::-moz-placeholder {\
  color: transparent\
}\
:focus:-moz-placeholder {\
  color: transparent\
}\
:focus:-ms-input-placeholder {\
  color: transparent\
}\
.cq-popup__button {\
  background-color: #000000;\
  border-radius: 0px;\
  border: none;\
  color: #fefefe;\
  cursor: pointer;\
  font-size: 16px;\
  font-weight: 400;\
  padding: 9px 0;\
  text-align: center;\
  transition: all 300ms ease;\
  width: 100%;\
}\
.cq-popup__button:focus {\
  outline: none;\
}\
.cq-popup__button:hover {\
  background-color: #222222;\
}\
</style>\
<div class="cq-popup__bg"></div>\
<div class="wrapper wrapper__body">\
    <div class="cq-popup__body wrapper">\
        <a class="cq-popup__close">Закрыть</a>\
        <form action="javascript:void(0);" class="cq-popup__form wrapper wrapper-col">\
            <div class="cq-popup__form_title wrapper wrapper-col">\
                <p class="cq-popup__text cq-popup__text-h1">Классный заголовок!</p>\
                <p class="cq-popup__text">А тут классный текст</p>\
            </div>\
            <div class="cq-popup__form_inputs wrapper wrapper-col">\
                <input class="cq-popup__input" required type="email" name="email" placeholder="Введите Ваш e-mail">\
                <input class="cq-popup__button cq-popup__button_submit" value="Подписаться" type="submit">\
            </div>\
        </form>\
    </div>\
</div>';

// Создаем div на странице и помещаем в него строку с CSS и HTML поп-апа
var div = document.createElement('div');
div.innerHTML = popupContent;
div.id = 'cqPopup';
document.body.appendChild(div);

var POPUP_NAME = 'Название поп-апа'; // Это название будет использоваться для построения цепочек автосообщений, основанных на данном поп-апе
var BODY = document.getElementById('cqPopup');
var BACKGROUND = document.querySelector('.cq-popup__bg');
var CLOSE_BUTTON = document.querySelector('.cq-popup__close');
var FORM = document.querySelector('.cq-popup__form');
var INPUT = document.querySelector('.cq-popup__input');

// Закрытие поп-апа
function close_popup() {
  BODY.remove();
};

function track_data() {
  // Запись свойства $email со значением из поля INPUT
  carrotquest.identify([{op: 'update_or_create', key: '$email', value: INPUT.value}]);
  // Вызываем событие «Коммуникации: Ответил на сообщение» (нужно для статистики автосообщения)
  carrotquest.trackMessageInteraction('{{ sending_id }}', 'replied');
  // Вызываем кастомное событие ответа на поп-ап, чтобы увидеть на какой конкретно поп-ап был ответ
  carrotquest.track('Ответил на поп-ап — ' + POPUP_NAME);
};

// Вызываем событие «Коммуникации: Прочитал сообщение» (нужно для статистики автосообщения)
carrotquest.trackMessageInteraction('{{ sending_id }}', 'read');

// При успешной отправке формы (введенный email валидный) записываем свойство и закрываем поп-ап
FORM.onsubmit = function() {
  track_data();
  close_popup();
};

CLOSE_BUTTON.onclick = function() {
  close_popup();
};

BACKGROUND.onclick = function() {
  close_popup();
};