ivan_carrotquest

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

Jul 25th, 2018
1,196
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Весь CSS и HTML код поп-апа находится в строке
  2. var popupContent = '<style>\
  3. @import url(\'https://fonts.googleapis.com/css?family=Open+Sans:300,400|PT+Sans&subset=cyrillic-ext\');\
  4. #cqPopup {\
  5.  width: 100%;\
  6.  height: 100%;\
  7.  position: fixed;\
  8.  left: 0;\
  9.  top: 0;\
  10. }\
  11. .cq-popup__bg {\
  12.  background: rgba(51, 51, 51, 0.8);\
  13.  cursor: pointer;\
  14.  height: 100%;\
  15.  left: 0;\
  16.  position: fixed;\
  17.  top: 0;\
  18.  width: 100%;\
  19.  z-index: 1;\
  20. }\
  21. .wrapper__body {\
  22.  justify-content: center;\
  23.  align-items: center;\
  24.  width: 100%;\
  25.  height: 100%;\
  26. }\
  27. .cq-popup__body {\
  28.  background-color: #FFF;\
  29.  border-radius: 0px;\
  30.  border: none;\
  31.  box-shadow: 0px 1px 14.3px 0.8px rgba(0, 0, 0, 0.5);\
  32.  box-sizing: border-box;\
  33.  font-family: \'Open Sans\', sans-serif;\
  34.  justify-content: center;\
  35.  max-width: 600px;\
  36.  padding: 30px;\
  37.  position: relative;\
  38.  top: 0px;\
  39.  width: 90%;\
  40.  z-index: 2;\
  41. }\
  42. .cq-popup__body * {\
  43.  box-sizing: border-box;\
  44. }\
  45. .cq-popup__close {\
  46.  background: rgba(0, 0, 0, 0.40);\
  47.  border-radius: 100px;\
  48.  box-sizing: content-box;\
  49.  color: #fff;\
  50.  font-family: \'PT Sans\', sans-serif;\
  51.  font-size: 12px;\
  52.  height: auto;\
  53.  padding: 3px 3px 3px 24px;\
  54.  right: 0px;\
  55.  top: -29px !important;\
  56.  width: 51px;\
  57.  position: absolute;\
  58.  z-index: 99;\
  59.  cursor: pointer;\
  60. }\
  61. .cq-popup__close:hover {\
  62.  background: rgba(0, 0, 0, 0.60);\
  63. }\
  64. .cq-popup__close:before {\
  65.  -webkit-font-smoothing: subpixel-antialiased;\
  66.  background-image: url(\'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDcgKDQ1Mzk2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5DbG9zZS1zbWFsbDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJTdW5Tb2NoaSwtZnVsbC1wb3B1cC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTM1MS4wMDAwMDAsIC05NC4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IkNsb3NlLWJ0biIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMzOS4wMDAwMDAsIDg3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkNsb3NlLXNtYWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4wMDAwMDAsIDUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IkJvdW5kcyIgeD0iMCIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTkuNSwyLjUgTDIuNSw5LjUiIGlkPSJMaW5lLUNvcHkiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjAwMDAwMCwgNi4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTYuMDAwMDAwLCAtNi4wMDAwMDApICI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMi41IEwyLjUsOS41IiBpZD0iTGluZS1Db3B5LTIiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==\');\
  67.  background-repeat: no-repeat;\
  68.  content: " " !important;\
  69.  height: 10px !important;\
  70.  left: 10px !important;\
  71.  position: absolute !important;\
  72.  top: 6px !important;\
  73.  width: 10px !important;\
  74. }\
  75. .wrapper {\
  76.  display: flex;\
  77. }\
  78. .wrapper-col {\
  79.  flex-direction: column;\
  80. }\
  81. .wrapper-row {\
  82.  flex-direction: row;\
  83. }\
  84. .cq-popup__text {\
  85.  color: #000;\
  86.  font-size: 16px;\
  87.  font-weight: 300;\
  88.  line-height: 25px;\
  89.  margin: 0;\
  90.  padding: 0;\
  91.  text-align: center;\
  92.  width: 100%;\
  93. }\
  94. .cq-popup__text-h1 {\
  95.  font-size: 24px;\
  96.  font-weight: 300;\
  97.  line-height: 28px;\
  98.  margin-bottom: 14px;\
  99. }\
  100. .cq-popup__text-h2 {\
  101.  font-size: 22px;\
  102. }\
  103. .cq-popup__form {\
  104.  flex-wrap: wrap;\
  105.  margin: 0;\
  106.  width: 100%;\
  107. }\
  108. .cq-popup__form_title {\
  109.  align-items: flex-start;\
  110.  margin-bottom: 23px;\
  111. }\
  112. .cq-popup__form_content {\
  113.  align-items: center;\
  114. }\
  115. .cq-popup__form_inputs {\
  116.  align-items: flex-start;\
  117.  justify-content: center;\
  118. }\
  119. .cq-popup__input {\
  120.  background: transparent;\
  121.  border: 1px solid #000000;\
  122.  border-radius: 0px;\
  123.  color: #000000;\
  124.  font-size: 14px;\
  125.  font-weight: 400;\
  126.  margin-bottom: 17px;\
  127.  padding: 10px 14px;\
  128.  width: 100%;\
  129. }\
  130. .cq-popup__input:focus {\
  131.  outline: none;\
  132. }\
  133. ::-webkit-input-placeholder {\
  134.  color: #999999;\
  135.  font-size: 14px;\
  136.  font-weight: 300;\
  137.  line-height: normal;\
  138. }\
  139. ::-moz-placeholder {\
  140.  color: #999999;\
  141.  font-size: 14px;\
  142.  font-weight: 300;\
  143.  line-height: normal;\
  144. }\
  145. /* Firefox 19+ */\
  146. :-moz-placeholder {\
  147.  color: #999999;\
  148.  font-size: 14px;\
  149.  font-weight: 300;\
  150.  line-height: normal;\
  151. }\
  152. /* Firefox 18- */\
  153. :-ms-input-placeholder {\
  154.  color: #999999;\
  155.  font-size: 14px;\
  156.  font-weight: 300;\
  157.  line-height: normal;\
  158. }\
  159. :focus::-webkit-input-placeholder {\
  160.  color: transparent\
  161. }\
  162. :focus::-moz-placeholder {\
  163.  color: transparent\
  164. }\
  165. :focus:-moz-placeholder {\
  166.  color: transparent\
  167. }\
  168. :focus:-ms-input-placeholder {\
  169.  color: transparent\
  170. }\
  171. .cq-popup__button {\
  172.  background-color: #000000;\
  173.  border-radius: 0px;\
  174.  border: none;\
  175.  color: #fefefe;\
  176.  cursor: pointer;\
  177.  font-size: 16px;\
  178.  font-weight: 400;\
  179.  padding: 9px 0;\
  180.  text-align: center;\
  181.  transition: all 300ms ease;\
  182.  width: 100%;\
  183. }\
  184. .cq-popup__button:focus {\
  185.  outline: none;\
  186. }\
  187. .cq-popup__button:hover {\
  188.  background-color: #222222;\
  189. }\
  190. </style>\
  191. <div class="cq-popup__bg"></div>\
  192. <div class="wrapper wrapper__body">\
  193.    <div class="cq-popup__body wrapper">\
  194.        <a class="cq-popup__close">Закрыть</a>\
  195.        <form action="javascript:void(0);" class="cq-popup__form wrapper wrapper-col">\
  196.            <div class="cq-popup__form_title wrapper wrapper-col">\
  197.                <p class="cq-popup__text cq-popup__text-h1">Классный заголовок!</p>\
  198.                <p class="cq-popup__text">А тут классный текст</p>\
  199.            </div>\
  200.            <div class="cq-popup__form_inputs wrapper wrapper-col">\
  201.                <input class="cq-popup__input" required type="email" name="email" placeholder="Введите Ваш e-mail">\
  202.                <input class="cq-popup__button cq-popup__button_submit" value="Подписаться" type="submit">\
  203.            </div>\
  204.        </form>\
  205.    </div>\
  206. </div>';
  207.  
  208. // Создаем div на странице и помещаем в него строку с CSS и HTML поп-апа
  209. var div = document.createElement('div');
  210. div.innerHTML = popupContent;
  211. div.id = 'cqPopup';
  212. document.body.appendChild(div);
  213.  
  214. var POPUP_NAME = 'Название поп-апа'; // Это название будет использоваться для построения цепочек автосообщений, основанных на данном поп-апе
  215. var BODY = document.getElementById('cqPopup');
  216. var BACKGROUND = document.querySelector('.cq-popup__bg');
  217. var CLOSE_BUTTON = document.querySelector('.cq-popup__close');
  218. var FORM = document.querySelector('.cq-popup__form');
  219. var INPUT = document.querySelector('.cq-popup__input');
  220.  
  221. // Закрытие поп-апа
  222. function close_popup() {
  223.   BODY.remove();
  224. };
  225.  
  226. function track_data() {
  227.   // Запись свойства $email со значением из поля INPUT
  228.   carrotquest.identify([{op: 'update_or_create', key: '$email', value: INPUT.value}]);
  229.   // Вызываем событие «Коммуникации: Ответил на сообщение» (нужно для статистики автосообщения)
  230.   carrotquest.trackMessageInteraction('{{ sending_id }}', 'replied');
  231.   // Вызываем кастомное событие ответа на поп-ап, чтобы увидеть на какой конкретно поп-ап был ответ
  232.   carrotquest.track('Ответил на поп-ап — ' + POPUP_NAME);
  233. };
  234.  
  235. // Вызываем событие «Коммуникации: Прочитал сообщение» (нужно для статистики автосообщения)
  236. carrotquest.trackMessageInteraction('{{ sending_id }}', 'read');
  237.  
  238. // При успешной отправке формы (введенный email валидный) записываем свойство и закрываем поп-ап
  239. FORM.onsubmit = function() {
  240.   track_data();
  241.   close_popup();
  242. };
  243.  
  244. CLOSE_BUTTON.onclick = function() {
  245.   close_popup();
  246. };
  247.  
  248. BACKGROUND.onclick = function() {
  249.   close_popup();
  250. };
RAW Paste Data