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

var popupContent = '<style> @import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700"); body { margin: 0; font-size: 100%; } #cq-popup-js-body { background-color: #f8ea00; background-repeat: no-repeat; background-size: cover; bottom: 0; box-shadow: 0px -5px 13px #808080; font-family: "PT Sans", sans-serif; position: fixed!important; text-align: center; width: 100%; z-index: 222222222222222223; } #cq-popup-js-btclose { background-color: #f8ea00; border-radius: 50%; cursor: pointer !important; height: 28px !important; padding: 6px 2px; position: absolute !important; right: 5px !important; top: -18px !important; width: 38px !important; z-index: 99 !important; } #cq-popup-js-btclose:hover { opacity: 1 !important; } #cq-popup-js-btclose:before, #cq-popup-js-btclose:after { position: absolute !important; left: 19px !important; content: " " !important; height: 24px !important; width: 2px !important; background-color: #333 !important; } #cq-popup-js-btclose:before { -webkit-transform: rotate(45deg) !important; transform: rotate(45deg) !important; } #cq-popup-js-btclose:after { -webkit-transform: rotate(-45deg) !important; transform: rotate(-45deg) !important; } #cq-popup-js-body p:nth-child(2) { color: #202020; font-family: "PT Sans", sans-serif; font-size: 18px; font-weight: 400; margin-bottom: 0; padding: 0 40px; text-align: center; } #cq-popup-js-body p:nth-child(3) { color: #565656; font-family: "PT Sans", sans-serif; margin: 7px 33px 15px 16px; text-align: left; } #cq-popup-js-body > div { top: 150px; width: 100%; } #cq-popup-js-input { background: #f9f9f9; border: none; border-radius: 2px; color: #565656; float: left; font-family: "PT Sans", sans-serif; left: 16px; margin-top: 15px; padding: 11px 10px; position: relative; width: calc(100% - 188px); } #cq-popup-js-input:focus { outline: none; } ::-webkit-input-placeholder { color: #8d8d8d; } ::-moz-placeholder { color: #8d8d8d; } /* Firefox 19+ */ :-moz-placeholder { color: #8d8d8d; } /* Firefox 18- */ :-ms-input-placeholder { color: #8d8d8d; } :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: #313030; color: #FFF; cursor: pointer; display: inline-block; font-family: "PT Sans", sans-serif; font-size: 18px; font-weight: 400; margin-bottom: 14px; margin-top: 15px; padding: 10px 24px; position: relative; } #cq-popup-js-error { background-color: white; border-radius: 4px; color: red; display: none; font-size: 16px; left: 17px; padding: 5px 10px; position: absolute; top: 66px; } @media only screen and (min-width: 410px) { #cq-popup-js-body p:nth-child(2) { font-size: 22px; } #cq-popup-js-body p:nth-child(3) { font-size: 18px; } #cq-popup-js-input { font-size: 15px; } #cq-popup-js-button1 { font-size: 16px; } } @media only screen and (max-width: 410px) { #cq-popup-js-body p:nth-child(2) { font-size: 16px; } #cq-popup-js-body p:nth-child(3) { font-size: 14px; } #cq-popup-js-input { font-size: 11px; } #cq-popup-js-button1 { font-size: 12px; } } </style> <div id="cq-popup-js-body"> <a id="cq-popup-js-btclose"></a> <p>Скидка 300 рублей на первую покупку, просто оставьте email</p> <div> <input id="cq-popup-js-input" required type="text" placeholder="Укажите email"> <div id="cq-popup-js-button1">Отправить</div> </div> </div> <script> var cqpopup_name = "1.1.1 Поп-ап с формой для ввода емейла (mobile)"; 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() { 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]); } } }; 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(); } }; 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 = '\
        <iframe id="carrot_frame" frameborder="0" style="width: 100%;max-height: 200px;min-height: 200px;left: 0px;top: auto; bottom:0;z-index: 99999999999999999999; display: inline;    box-sizing: border-box;">\
        </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();
document.getElementById("carrot_frame").style.position ='fixed';
var e = navigator.userAgent.toLowerCase();
if (e.indexOf("safari") > -1 && (e.indexOf("iphone") > -1 || e.indexOf("ipad") > -1)) {
    $('#carrot_frame').contents().find('#cq-popup-js-input').on('focus', function() {
        document.getElementById("carrot_frame").style.position ='absolute';
        document.body.scrollTop = $('#carrot_frame').offset().top + 30;
        //$('#carrot_frame').css('position','absolute !important');
    });

    $('#carrot_frame').contents().find('#cq-popup-js-input').on('blur', function() {
       setTimeout(function() {document.getElementById("carrot_frame").style.position ='fixed';}, 500);
    });
}