var popupContent = '<style> @import url(\'https://fonts.googleapis.com/css?family=Open+Sans:600&subset=cyrillic-ext\'); @font-face { font-family: \'Fedra Sans Alt Pro Book\'; src: url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Book.woff); src: url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Book.eot?#iefix) format(\'embedded-opentype\'),url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Book.woff) format(\'woff\'),url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Book.ttf) format(\'truetype\'),url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Book.svg#658d0aa3eadd6181c9b967d314ddec9f) format(\'svg\'); font-style: normal; font-weight: 700 } @font-face { font-family: \'Fedra Sans Alt Pro Medium\'; src: url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Medium.eot); src: url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Medium.eot?#iefix) format(\'embedded-opentype\'),url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Medium.woff) format(\'woff\'),url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Medium.ttf) format(\'truetype\'),url(https://{{user["subdomain"]}}.domru.ru/assets/17e69f8a/fonts/FedraSansAltPro-Medium.svg#658d0aa3eadd6181c9b967d314ddec9f) format(\'svg\'); font-style: normal; font-weight: 700 } * { -webkit-appearance: none; font-family: \'Fedra Sans Alt Pro Book\', \'Open Sans\', sans-serif; } body { margin: 0; } a { color: inherit; } .cq-popup-bg { background: rgba(0, 0, 0, 0.3); cursor: pointer; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 1; } .cq-popup-body { background: url(https://files.carrotquest.io/messenger/1500468287442-69866a38-35c4-4759-87eb-66893b7d83ea.jpg); background-color: #000; border-radius: 0px; -webkit-box-sizing: border-box; box-sizing: border-box; height: 370px; left: calc(50%); padding: 62px 50px 69px; position: fixed; top: 50%; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); width: 700px; z-index: 2; } .cq-popup__close { cursor: pointer; height: 26px; opacity: 0.7; position: absolute; right: 25px; top: 24px; width: 26px; z-index: 99; } .cq-popup__close:hover { opacity: 1; } .cq-popup__close:before, .cq-popup__close:after { background-color: #FFF; content: " "; height: 27px; left: 50%; position: absolute; width: 1px; } .cq-popup__close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .cq-popup__close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .wrapper { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .wrapper-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .wrapper-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .cq-popup__form { -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; } .cq-popup__form.cq-popup__form-success *:not(.cq-popup__text-success) { display: none; } .cq-popup__form.cq-popup__form-success .cq-popup__text-success { display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } .form__inputs { margin-top: 61px; } .cq-popup__text { color: #ffffff; font-size: 18px; font-weight: 700; line-height: 1.333; margin: 0; padding: 0; } .cq-popup__text-title { font-size: 40px; font-weight: 700; line-height: 40px; margin-bottom: 13px; } .form__input { background: transparent; border-radius: 0; border: none; border-bottom: 1px solid #ffffff; color: #000000; font-size: 18px; padding: 16px 10px 0 0; width: 390px; margin-right: 10px; } .form__input:focus, .form__input.form__input-active { background-color: #FFF; outline: none; padding: 13px 10px; } ::-webkit-input-placeholder { color: #ffffff; font-size: 18px; opacity: 0.7; } ::-moz-placeholder { color: #ffffff; font-size: 18px; opacity: 0.7; } /* Firefox 19+ */ :-moz-placeholder { color: #ffffff; font-size: 18px; opacity: 0.7; } /* Firefox 18- */ :-ms-input-placeholder { color: #ffffff; font-size: 18px; opacity: 0.7; } .form__input:hover::-webkit-input-placeholder { opacity: 1; } .form__input:hover::-moz-placeholder { opacity: 1; } .form__input:hover::-moz-placeholder { opacity: 1; } .form__input:hover::-ms-input-placeholder { opacity: 1; } :focus::-webkit-input-placeholder { color: transparent } :focus::-moz-placeholder { color: transparent } :focus:-moz-placeholder { color: transparent } :focus:-ms-input-placeholder { color: transparent } .form__button-submit { background-color: #ffdd00; border-radius: 3px; border: none; border-bottom: 4px solid #fda609; color: #000000; cursor: pointer; font-family: \'Fedra Sans Alt Pro Medium\', \'Open Sans\', sans-serif; font-size: 18px; font-weight: 700; padding: 13px 0; text-align: center; width: 200px; } .form__button-submit:hover { background-color: #ffe74f; } .form__button-submit:focus { outline: none; } .cq-popup-body__success { background: url(https://files.carrotquest.io/messenger/1500463577480-1c58da2a-3094-4697-9dc2-275de269150b.jpg); display: none; padding: 50px 50px 69px; } .cq-popup-body__success .cq-popup__close:before, .cq-popup-body__success .cq-popup__close:after { background-color: #000; } .cq-popup-body__success .cq-popup__text { color: #000; font-size: 14px; line-height: 22px; } .cq-popup-body__success .cq-popup__text-title { font-size: 28px; line-height: 36px; margin-bottom: 2px; } .cq-popup-body__success .form__input-success { background-color: rgba(0, 0, 0, 0); border: none; border-bottom: 2px dotted #000; color: #000; cursor: pointer; font-size: 14px; margin-top: 23px; padding: 0; text-align: left; width: 83px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.js"></script> <div class="cq-popup-bg"></div> <div class="cq-popup-body cq-popup-body__first"> <a class="cq-popup__close"></a> <form action="javascript:void(0);" class="cq-popup__form cq-popup__form-first wrapper wrapper-row"> <div class="wrapper wrapper-col"> <p class="cq-popup__text cq-popup__text-title">Телефона достаточно</p> <p class="cq-popup__text">Вы можете не заполнять всю заявку целиком.<br>Оставьте телефон, менеджер поможет<br>подключиться и ответит на вопросы.</p> </div> <div class="form__inputs wrapper wrapper-row"> <input class="form__input" required type="tel" name="tel" placeholder="На этот телефон перезвонит менеджер"> <input class="form__button-submit" value="Отправить" type="submit"> </div> </form> </div> <div class="cq-popup-body cq-popup-body__success"> <a class="cq-popup__close"></a> <form action="javascript:void(0);" class="cq-popup__form cq-popup__form-second wrapper wrapper-row"> <div class="wrapper wrapper-col"> <p class="cq-popup__text cq-popup__text-title">Вы отправили<br>телефон менеджеру</p> <p class="cq-popup__text">Дождитесь звонка. Через 3 минуты<br>позвонит менеджер, поможет выбрать<br>тариф и подключиться.</p> <input class="form__input form__input-success" type="submit" value="Ок, спасибо"> </div> </form> </div><script> var cqpopup_name = "2.1 Поп-ап с формой для ввода телефона"; var carrotquest = {}; carrotquest.track = function (name, parametr) { var data = {comand: "carrotquest.track", "name": name, "parametr": parametr }; top.postMessage(data, "*"); }; carrotquest.identify = function (props) { var data = {comand: "carrotquest.identify", "props": props }; top.postMessage(data, "*"); }; carrotquest.trackMessageInteraction = function (id, type) { var data = {comand: "carrotquest.trackMessageInteraction", "id": id, "type":type}; top.postMessage(data, "*"); }; function close_popup() { $(\'.cq-popup-body\').remove(); $(\'.cq-popup-bg\').remove(); carrotquest.identify([{op: \'update_or_create\', key: \'popup\', value: \'closed\'}]); var data = {comand: "carrotquest.close_popup"}; top.postMessage(data, "*"); }; function track_data() { carrotquest.identify([{op: \'update_or_create\', key: \'$phone\', value: $(\'.cq-popup__form input[type="tel"]\').val()}]); carrotquest.trackMessageInteraction(\'{{ sending_id }}\', \'replied\'); carrotquest.track(\'Коммуникации: Ответил на сообщение - \' + cqpopup_name); var data = {comand: "carrotquest.gaPush"}; top.postMessage(data, "*"); }; carrotquest.trackMessageInteraction(\'{{ sending_id }}\', \'read\'); carrotquest.track(\'Коммуникации: Прочитано сообщение - \' + cqpopup_name); $(\'.form__input\').inputmask({ mask: \'+7 (999) 999-99-99\', placeholder:"_", showMaskOnHover: false }); $(\'.form__input\').on(\'change\', function() { if ($(this).val() != \'\') { $(this).addClass(\'form__input-active\'); } else { $(this).removeClass(\'form__input-active\'); } }); $(\'.cq-popup__form-first\').on(\'submit\', function() { track_data(); $(\'.cq-popup-body__first\').hide(); $(\'.cq-popup-body__success\').show(); }); $(\'.cq-popup__form-second\').on(\'submit\', function() { close_popup(); }); $(\'.cq-popup__close, .cq-popup-bg\').on(\'click\', function () { close_popup(); }); Element.prototype.remove = function() { this.parentElement.removeChild(this); }; NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { for(var i = this.length - 1; i >= 0; i--) { if(this[i] && this[i].parentElement) { this[i].parentElement.removeChild(this[i]); } } }; </script>';

var str = '\
        <iframe id="carrot_frame" frameborder="0" style="width: 100%;height: 100%;left: 0;top: 0;position: fixed!important;z-index: 99999">\
        </iframe>';

var div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div);
var iframe = document.getElementById("carrot_frame");
var frameDoc = iframe.document;
if(iframe.contentWindow)
    frameDoc = iframe.contentWindow.document; // IE
frameDoc.open();
frameDoc.writeln(popupContent);
frameDoc.close();
carrotquest.identify([{op: 'update_or_create', key: 'popup', value: 'opened'}]);