Центральный поп-ап

var popupContent = '<style> @import url("https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700"); #cq-popup-js-body { background: url(https://files.carrotquest.io/messenger/1489127048449-733b3fe5-f5ca-4bb2-8e07-af3ec39218dc.png); background-repeat: no-repeat; border-radius: 5px; font-family: "PT Sans", sans-serif; height: 370px; left: calc(50%); position: fixed; top: calc(50%); transform: translate(-50%, -50%) scale(1); width: 700px; z-index: 222222222222222223; } #cq-popup-js-btclose { cursor: pointer; height: 32px; opacity: 0.5; position: absolute; right: 5px; top: 10px; width: 32px; z-index: 99; } #cq-popup-js-btclose:hover { opacity: 1; } #cq-popup-js-btclose:before, #cq-popup-js-btclose:after { background-color: #FFF; content: " "; height: 24px; left: 15px; position: absolute; width: 2px; } #cq-popup-js-btclose:before { transform: rotate(45deg); } #cq-popup-js-btclose:after { transform: rotate(-45deg); } #cq-popup-js-body p:nth-child(2) { color: #FFF; font-family: "PT Sans", sans-serif; font-size: 30px; font-weight: 400; left: 32px; padding: 0 240px 0 0; position: absolute; text-align: left; top: 104px; } #cq-popup-js-input { background: #FFF; border: 3px solid #da5787; border-radius: 4px; color: #000; float: left; font-family: "PT Sans", sans-serif; font-size: 18px; left: 32px; padding: 9px 10px; position: absolute; top: 289px; width: 418px; } #cq-popup-js-input:focus { outline: none; } ::-webkit-input-placeholder { color: #969696; font-style: italic; font-weight: 400; } ::-moz-placeholder { color: #969696; font-style: italic; font-weight: 400; } /* Firefox 19+ */ :-moz-placeholder { color: #969696; font-style: italic; font-weight: 400; } /* Firefox 18- */ :-ms-input-placeholder { color: #969696; font-style: italic; font-weight: 400; } :focus::-webkit-input-placeholder { color: transparent } :focus::-moz-placeholder { color: transparent } :focus:-moz-placeholder { color: transparent } :focus:-ms-input-placeholder { color: transparent } #cq-popup-js-button1 { background-color: #da5787; border-radius: 2px; color: #FFF; cursor: pointer; display: block; font-family: "PT Sans", sans-serif; font-size: 18px; font-weight: 700; left: 468px; padding: 11px 16px; position: absolute; text-align: center; top: 289px; } #cq-popup-js-button1:hover { background-color: #ee6f9e; } #cq-popup-js-error { background-color: white; border-radius: 4px; color: red; display: none; font-family: "PT Sans", sans-serif; font-size: 16px; left: 32px; padding: 5px 10px; position: absolute; top: 241px; } </style> <div id="cq-popup-js-body"> <a id="cq-popup-js-btclose"></a> <p> Оставьте email и мы пришлем вам промокод на покупку </p> <p id="cq-popup-js-error">Поле не заполнено!</p> <input id="cq-popup-js-input" required type="text" placeholder="Введите ваш email"> <div id="cq-popup-js-button1">Получить промокод</div> </div><script> var cqpopup_name = "Поп-ап с формой для ввода емейла"; 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() { document.getElementById("cq-popup-js-body").remove(); var data = {comand: "carrotquest.close_popup"}; top.postMessage(data, "*"); }; function track_email() { var email = document.getElementById("cq-popup-js-input").value; if (email) { carrotquest.identify({ "$email": email }); carrotquest.track("Коммуникации: Ответил на сообщение - " + cqpopup_name); carrotquest.trackMessageInteraction("{{sending_id}}", "replied"); close_popup(); } else { document.getElementById("cq-popup-js-error").style.display = "block"; } }; document.getElementById("cq-popup-js-input").oninput = function() { document.getElementById("cq-popup-js-error").style.display = "none"; }; document.getElementById("cq-popup-js-input").onclick = function() { document.getElementById("cq-popup-js-error").style.display = "none"; }; document.getElementById("cq-popup-js-input").onkeyup = function (e) { e = e || window.event; if(e.keyCode == "13") { track_email(); } }; carrotquest.trackMessageInteraction("{{ sending_id }}", "read"); carrotquest.track("Коммуникации: Прочитано сообщение - " + cqpopup_name); document.getElementById("cq-popup-js-button1").onclick = function() { track_email(); }; document.getElementById("cq-popup-js-btclose").onclick = 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 = '\
       <div id="cq-popup-js-bg" style="cursor: pointer;    position: fixed; top:0; left: 0;    width: 100%;     height: 100%;     background: rgba(51,51,51,0.8);     z-index: 9999; "></div>\
        <iframe id="carrot_frame" frameborder="0" style="width: 800px;height: 400px;left: calc(50%);top: calc(50%);position: fixed!important;transform: translate(-50%, -50%) scale(1);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();

var bg = document.getElementById('cq-popup-js-bg');
bg.onclick = function () {
  document.getElementById('carrot_frame').remove();
  document.getElementById('cq-popup-js-bg').remove();
}