Fill the form
We will contact you to confirm the details
Значения, которые были введены
Для того чтобы встроить другую страницу или сайт в попапе вашего сайта, нужно заполнить следующие поля:
Общие настройки iframe
1. «Ссылка в кнопке» — Придумайте ссылку для кнопки, при нажатии которой будет всплывать попап с iframe;
2. «Адрес страницы» — Укажите ссылку на страницу вашего сайта, который вы хотели бы открыть во всплывающем окне на другой странице вашего сайте. Также модификация может встроить в попап страницы сторонних сайтов, если у них включена настройка «Разрешить встраивать сайты в frame».
Важно: ссылка на встраиваемый сайт должна иметь такой же протокол как и ваш основной сайт, т. е. http=http или https=https;
3. «Цвет фона iframe» — Укажите цвет фона для фона iframe, в котором будет отображаться другой сайт;
4. «Отступы слева/справа» — В этом поле вы можете указать отступы слева и справа внутри попап;
5. «Отступы сверху/снизу» — В этом поле вы можете указать отступы сверху и снизу внутри попап;
6. «Z-index» — В этом поле нужно настроить z-index для попапа. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой;
7. «Ширина iframe в мобильной версии (%)» — В этом поле вы можете задать ширину iframe в мобильной версии. Значение указывается в %. Рекомендуется указать 100%;
8. «Высота iframe в мобильной версии (%)» — В этом поле вы можете задать высоту iframe в мобильной версии. Значение указывается в %. Рекомендуется указать 100%;
9. «Закрывать iframe при клике вне его» — При активации данной функции, iframe будет закрываться при клике вне области попапа;
10. «Предзагружать iframe» — При активации данной функции сайт или страница будет предзагружаться до открытия попапа.
11. «Закрывать iframe при клике вне его» — Если активировать данную функцию, то попап будет закрываться при клике вне зоны страницы;
12. «Блокировать скролл страницы при открытом попапе» — Если активировать данную функцию, то страница не будет скроллится пока попап будет открыт;
13. «При открытии ссылок внутри iframe, закрывать iframe» — Данная функция позволит осуществлять переход по ссылкам на отдельные страницы, а не открывать их внутри iframe;
Кастомизация иконки закрытия
14. «Размеры крестика» — Размеры иконки крестика для закрытия попапа;
15. «Цвет обводки крестика» — Цвет обводки иконки крестика для закрытия попапа;
16. «Цвет крестика» — Цвет иконки крестика для закрытия попапа;
17. «Цвет крестика в мобильной версии» — Цвет крестика в мобильной версии для закрытия попапа;
18. «Фон крестика» — Фон иконки крестика для закрытия попапа;
19. «Фон крестика при наведении» — Фон крестика при наведении для закрытия попапа;
20. «Фон крестика в мобильной версии» — Фон крестика в мобильной версии для закрытия попапа;
21. «Цвет плашки в мобильной версии» — Цвет плашки под иконкой закрытия;
22. «Расстояние сверху до крестика (px)» — Расстояние сверху до крестика. Значение указывается в px;
23. «Расстояние справа до крестика (px)» — Расстояние справа до крестика. Значение указывается в px;
24. Добавляете блок Т123 и вставляете в него сгенерированный HTML код.
Важно:
Если вы встраиваете страницу сайта на Тильде, нужно перейти в настройки сайта → Ограничить доступ → включите галочку «Отключить защиту от фреймов»
Общие настройки iframe
1. «Ссылка в кнопке» — Придумайте ссылку для кнопки, при нажатии которой будет всплывать попап с iframe;
2. «Адрес страницы» — Укажите ссылку на страницу вашего сайта, который вы хотели бы открыть во всплывающем окне на другой странице вашего сайте. Также модификация может встроить в попап страницы сторонних сайтов, если у них включена настройка «Разрешить встраивать сайты в frame».
Важно: ссылка на встраиваемый сайт должна иметь такой же протокол как и ваш основной сайт, т. е. http=http или https=https;
3. «Цвет фона iframe» — Укажите цвет фона для фона iframe, в котором будет отображаться другой сайт;
4. «Отступы слева/справа» — В этом поле вы можете указать отступы слева и справа внутри попап;
5. «Отступы сверху/снизу» — В этом поле вы можете указать отступы сверху и снизу внутри попап;
6. «Z-index» — В этом поле нужно настроить z-index для попапа. Z-index простыми словами это слои, как в торте. Значение указывается цифрами, чем больше цифра, тем выше будет находиться слой;
7. «Ширина iframe в мобильной версии (%)» — В этом поле вы можете задать ширину iframe в мобильной версии. Значение указывается в %. Рекомендуется указать 100%;
8. «Высота iframe в мобильной версии (%)» — В этом поле вы можете задать высоту iframe в мобильной версии. Значение указывается в %. Рекомендуется указать 100%;
9. «Закрывать iframe при клике вне его» — При активации данной функции, iframe будет закрываться при клике вне области попапа;
10. «Предзагружать iframe» — При активации данной функции сайт или страница будет предзагружаться до открытия попапа.
11. «Закрывать iframe при клике вне его» — Если активировать данную функцию, то попап будет закрываться при клике вне зоны страницы;
12. «Блокировать скролл страницы при открытом попапе» — Если активировать данную функцию, то страница не будет скроллится пока попап будет открыт;
13. «При открытии ссылок внутри iframe, закрывать iframe» — Данная функция позволит осуществлять переход по ссылкам на отдельные страницы, а не открывать их внутри iframe;
Кастомизация иконки закрытия
14. «Размеры крестика» — Размеры иконки крестика для закрытия попапа;
15. «Цвет обводки крестика» — Цвет обводки иконки крестика для закрытия попапа;
16. «Цвет крестика» — Цвет иконки крестика для закрытия попапа;
17. «Цвет крестика в мобильной версии» — Цвет крестика в мобильной версии для закрытия попапа;
18. «Фон крестика» — Фон иконки крестика для закрытия попапа;
19. «Фон крестика при наведении» — Фон крестика при наведении для закрытия попапа;
20. «Фон крестика в мобильной версии» — Фон крестика в мобильной версии для закрытия попапа;
21. «Цвет плашки в мобильной версии» — Цвет плашки под иконкой закрытия;
22. «Расстояние сверху до крестика (px)» — Расстояние сверху до крестика. Значение указывается в px;
23. «Расстояние справа до крестика (px)» — Расстояние справа до крестика. Значение указывается в px;
24. Добавляете блок Т123 и вставляете в него сгенерированный HTML код.
Важно:
Если вы встраиваете страницу сайта на Тильде, нужно перейти в настройки сайта → Ограничить доступ → включите галочку «Отключить защиту от фреймов»
Як на картинке
<!--NOLIM--><!--NLM126--><!--settings {
"btnHref": "#btnPopup", "pageHref":"https://mooore.red", "iframeBackground":"#fffff", "paddingX":"0", "paddingY":"2", "zIndex":"9999", "closeWidth":"30", "closeStroke":"#a9c7fe", "closeColor":"#ff0000", "closeColorMobile":"#ff2e2e", "closeBackground":"#bfbfbf", "closeBackgroundHover":"#d1d1d1", "closeBackgroundMobile":"#b8d1ff", "headerColorMobile":"#3d434c", "preloadIframeBefore":"false", "closeTop":"10", "closeRight":"30", "iframeWidthMobile":"100", "iframeHeightMobile":"100", "closeIframeOutside":"false", "blockScroll":"1", "openIframeLinksOnMainPage":"1"
}
settingsend--><!--ts1741603188251ts--><script>(function() {
$(document).ready(function() {
if(1===1) {
function getBaseUrl(urlString) {
const url=new URL(urlString);
return url.protocol + '//' + url.host;
}
const allowedIframeOrigin=getBaseUrl('https://mooore.red');
window.addEventListener('message', function(event) {
if (event.origin !==allowedIframeOrigin) {
return;
}
if (event.data && event.data.type==='LINK_CLICK') {
const href=event.data.href;
if (typeof href==='string' && href) {
const isAnotherSite=href.startsWith("http") || href.startsWith("https");
if (isAnotherSite) {
window.open(href, '_self');
}
else {
const newUrl=new URL(href, allowedIframeOrigin);
window.top.location.href=newUrl.href;
}
}
}
}
);
}
let hrefInterval=setInterval(()=> {
let t396List=[];
let t396RenderedList=[];
document.querySelectorAll('[data-record-type="396"] .t396__artboard').forEach(function(item) {
if (!item.parentNode.closest(".r.t-rec")) {
t396List.push(item);
}
}
);
document.querySelectorAll('[data-record-type="396"] .t396__artboard.rendered').forEach(function(item) {
if (!item.parentNode.closest(".r.t-rec")) {
t396RenderedList.push(item);
}
}
);
if (t396List.length==t396RenderedList.length) {
clearInterval(hrefInterval);
let hrefList=document.querySelectorAll('[href="#btnPopup"]');
document.addEventListener('click', function(event) {
if (event.target.tagName==='A' && event.target.hasAttribute('href')) {
if (event.target.href.includes('#btnPopup')) {
event.preventDefault();
openIframePopup();
}
}
}
);
}
}
, 100);
setTimeout(()=> {
if(hrefInterval) {
clearInterval(hrefInterval);
}
}
, 5000);
if(false) {
createIframe();
preloadIframe();
}
}
);
let iframe=null;
let iframeCounter=0;
var overlay=document.createElement('div');
var closeIcon=document.createElementNS("http://www.w3.org/2000/svg", "svg");
var closeIconWrapper=document.createElement('div');
closeIconWrapper.classList.add('closeIconWrapper');
function createIframe() {
iframe=document.createElement('iframe');
iframe.classList.add('customIframe934784724');
iframe.style.cssText=" width: calc(100% - 0px); height: calc(100% - 2px); background-color: #fffff; border: none; padding: 0px 0px; ";
}
function preloadIframe() {
iframe.src='https://mooore.red';
if(1===1) {
iframe.onload=function() {
const iframeDocument=iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.querySelectorAll('a').forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
const href=link.getAttribute('href');
window.parent.postMessage( {
type: 'LINK_CLICK', href
}
, '*');
}
);
}
);
}
;
}
overlay.appendChild(iframe);
closeIconWrapper.appendChild(closeIcon);
overlay.appendChild(closeIconWrapper);
document.body.appendChild(overlay);
overlay.style.cssText=` position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
transform: translateY(100%) scale(0.9);
z-index: 9999;
`;
}
function openIframePopup() {
if(!false && iframeCounter===0) {
createIframe();
preloadIframe();
}
iframeCounter+=1;
closeIcon.setAttribute("role", "presentation");
closeIcon.setAttribute("class", "t-popup__close-icon");
closeIcon.setAttribute("width", "23px");
closeIcon.setAttribute("height", "23px");
closeIcon.setAttribute("viewBox", "0 0 23 23");
var g=document.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttribute("stroke", "#a9c7fe");
g.setAttribute("fill", "#ff0000");
g.setAttribute("fill-rule", "evenodd");
var rect1=document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect1.setAttribute("transform", "translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) ");
rect1.setAttribute("x", "10.3137085");
rect1.setAttribute("y", "-3.6862915");
rect1.setAttribute("width", "2");
rect1.setAttribute("height", "30");
var rect2=document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect2.setAttribute("transform", "translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) ");
rect2.setAttribute("x", "10.3137085");
rect2.setAttribute("y", "-3.6862915");
rect2.setAttribute("width", "2");
rect2.setAttribute("height", "30");
g.appendChild(rect1);
g.appendChild(rect2);
closeIcon.appendChild(g);
closeIconWrapper.classList.add('t-popup__block-close934784724');
closeIcon.style.cssText=" position: absolute; right: 30px; top: 10px; width:30px; height: 30px; border: none; background: #bfbfbf; color: #fff; font-size: 20px; line-height: 30px; text-align: center; cursor: pointer; padding:10px; border-radius:500px; ";
setTimeout(()=> {
overlay.style.opacity='1';
overlay.style.transform='translateY(0) scale(1.0)';
}
, 0);
if(1) {
document.querySelector('.t-body').classList.add('block-scroll');
}
}
closeIcon.onclick=function() {
closeIframe();
}
;
closeIconWrapper.onclick=function(e) {
if(window.innerWidth <=768) {
closeIframe();
}
}
;
if(false===1) {
overlay.addEventListener('click', function(e) {
if(!iframe.contains(e.target)) {
closeIframe();
}
}
)
}
;
function closeIframe () {
overlay.style.opacity='0';
overlay.style.transform='translateY(100%) scale(0.8)';
document.querySelector('.t-body').classList.remove('block-scroll');
}
}
)();
</script><style>.block-scroll {
overflow: hidden;
}
.t-popup__block-close934784724 {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 2;
width: 100%;
cursor: pointer;
}
.t-popup__block-close934784724 .t-popup__close-icon:hover {
background: #d1d1d1!important;
}
@media(max-width:768px) {
.t-popup__block-close934784724 {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
background: #3d434c!important;
}
.t-popup__block-close934784724 .t-popup__close-icon {
background: #b8d1ff!important;
right: 0px!important;
top: 0px!important;
}
.t-popup__block-close934784724 .t-popup__close-icon:hover {
background: transparent!important;
}
.t-popup__block-close934784724 .t-popup__close-icon g {
fill: #ff2e2e!important;
}
.customIframe934784724 {
position: absolute;
width: 100%!important;
height: calc(100% - 50px) !important;
top: 50px;
}
}
</style>без усіх галочок внизу
<!--NOLIM--><!--NLM126--><!--settings{"btnHref":"#btnPopup","pageHref":"https://mooore.red","iframeBackground":"#fffff","paddingX":"0","paddingY":"2","zIndex":"9999","closeWidth":"30","closeStroke":"#a9c7fe","closeColor":"#ff0000","closeColorMobile":"#ff2e2e","closeBackground":"#bfbfbf","closeBackgroundHover":"#d1d1d1","closeBackgroundMobile":"#b8d1ff","headerColorMobile":"#3d434c","preloadIframeBefore":"false","closeTop":"10","closeRight":"30","iframeWidthMobile":"100","iframeHeightMobile":"100","closeIframeOutside":"false","blockScroll":"0","openIframeLinksOnMainPage":"0"}settingsend--><!--ts1741603356082ts--> <script> (function(){ $(document).ready(function(){ if(0 === 1) { function getBaseUrl(urlString) { const url = new URL(urlString); return url.protocol + '//' + url.host; } const allowedIframeOrigin = getBaseUrl('https://mooore.red'); window.addEventListener('message', function(event) { if (event.origin !== allowedIframeOrigin) { return; } if (event.data && event.data.type === 'LINK_CLICK') { const href = event.data.href; if (typeof href === 'string' && href) { const isAnotherSite = href.startsWith("http") || href.startsWith("https"); if (isAnotherSite) { window.open(href, '_self'); } else { const newUrl = new URL(href, allowedIframeOrigin); window.top.location.href = newUrl.href; } } } }); } let hrefInterval = setInterval(()=>{ let t396List = []; let t396RenderedList = []; document.querySelectorAll('[data-record-type="396"] .t396__artboard').forEach(function(item) { if (!item.parentNode.closest(".r.t-rec")) { t396List.push(item); } }); document.querySelectorAll('[data-record-type="396"] .t396__artboard.rendered').forEach(function(item) { if (!item.parentNode.closest(".r.t-rec")) { t396RenderedList.push(item); } }); if (t396List.length == t396RenderedList.length) { clearInterval(hrefInterval); let hrefList = document.querySelectorAll('[href="#btnPopup"]'); document.addEventListener('click', function(event) { if (event.target.tagName === 'A' && event.target.hasAttribute('href')) { if (event.target.href.includes('#btnPopup')) { event.preventDefault(); openIframePopup(); } } }); } },100); setTimeout(()=>{ if(hrefInterval) { clearInterval(hrefInterval); } },5000); if(false) { createIframe(); preloadIframe(); } }); let iframe = null; let iframeCounter = 0; var overlay = document.createElement('div'); var closeIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var closeIconWrapper = document.createElement('div'); closeIconWrapper.classList.add('closeIconWrapper'); function createIframe() { iframe = document.createElement('iframe'); iframe.classList.add('customIframe513100116'); iframe.style.cssText = " width: calc(100% - 0px); height: calc(100% - 2px); background-color: #fffff; border: none; padding: 0px 0px; "; } function preloadIframe() { iframe.src = 'https://mooore.red'; if(0 === 1) { iframe.onload = function() { const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; iframeDocument.querySelectorAll('a').forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); const href = link.getAttribute('href'); window.parent.postMessage({ type: 'LINK_CLICK', href }, '*'); }); }); }; } overlay.appendChild(iframe); closeIconWrapper.appendChild(closeIcon); overlay.appendChild(closeIconWrapper); document.body.appendChild(overlay); overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; transform: translateY(100%) scale(0.9); z-index: 9999; `; } function openIframePopup() { if(!false && iframeCounter === 0) { createIframe(); preloadIframe(); } iframeCounter+=1; closeIcon.setAttribute("role", "presentation"); closeIcon.setAttribute("class", "t-popup__close-icon"); closeIcon.setAttribute("width", "23px"); closeIcon.setAttribute("height", "23px"); closeIcon.setAttribute("viewBox", "0 0 23 23"); var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); g.setAttribute("stroke", "#a9c7fe"); g.setAttribute("fill", "#ff0000"); g.setAttribute("fill-rule", "evenodd"); var rect1 = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect1.setAttribute("transform", "translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) "); rect1.setAttribute("x", "10.3137085"); rect1.setAttribute("y", "-3.6862915"); rect1.setAttribute("width", "2"); rect1.setAttribute("height", "30"); var rect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect2.setAttribute("transform", "translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) "); rect2.setAttribute("x", "10.3137085"); rect2.setAttribute("y", "-3.6862915"); rect2.setAttribute("width", "2"); rect2.setAttribute("height", "30"); g.appendChild(rect1); g.appendChild(rect2); closeIcon.appendChild(g); closeIconWrapper.classList.add('t-popup__block-close513100116'); closeIcon.style.cssText = " position: absolute; right: 30px; top: 10px; width:30px; height: 30px; border: none; background: #bfbfbf; color: #fff; font-size: 20px; line-height: 30px; text-align: center; cursor: pointer; padding:10px; border-radius:500px; "; setTimeout(() => { overlay.style.opacity = '1'; overlay.style.transform = 'translateY(0) scale(1.0)'; }, 0); if(0) { document.querySelector('.t-body').classList.add('block-scroll'); } } closeIcon.onclick = function(){ closeIframe(); }; closeIconWrapper.onclick = function(e){ if(window.innerWidth <= 768) { closeIframe(); } }; if(false === 1) { overlay.addEventListener('click', function(e){ if(!iframe.contains(e.target)) { closeIframe(); } }) }; function closeIframe () { overlay.style.opacity = '0'; overlay.style.transform = 'translateY(100%) scale(0.8)'; document.querySelector('.t-body').classList.remove('block-scroll'); } })(); </script> <style> .block-scroll { overflow: hidden; } .t-popup__block-close513100116 { position: fixed; top: 0; right: 0; left: 0; z-index: 2; width: 100%; cursor:pointer; } .t-popup__block-close513100116 .t-popup__close-icon:hover { background: #d1d1d1!important; } @media(max-width:768px) { .t-popup__block-close513100116 { display: flex; justify-content: flex-end; align-items: center; height: 50px; background: #3d434c!important; } .t-popup__block-close513100116 .t-popup__close-icon { background: #b8d1ff!important; right:0px!important; top:0px!important; } .t-popup__block-close513100116 .t-popup__close-icon:hover { background: transparent!important; } .t-popup__block-close513100116 .t-popup__close-icon g { fill:#ff2e2e!important; } .customIframe513100116 { position: absolute; width: 100%!important; height: calc(100% - 50px) !important; top: 50px; } } </style> тільки з першою галочкой
<!--NOLIM--><!--NLM126--><!--settings{"btnHref":"#btnPopup","pageHref":"https://mooore.red","iframeBackground":"#fffff","paddingX":"0","paddingY":"2","zIndex":"9999","closeWidth":"30","closeStroke":"#a9c7fe","closeColor":"#ff0000","closeColorMobile":"#ff2e2e","closeBackground":"#bfbfbf","closeBackgroundHover":"#d1d1d1","closeBackgroundMobile":"#b8d1ff","headerColorMobile":"#3d434c","preloadIframeBefore":"false","closeTop":"10","closeRight":"30","iframeWidthMobile":"100","iframeHeightMobile":"100","closeIframeOutside":"1","blockScroll":"0","openIframeLinksOnMainPage":"0"}settingsend--><!--ts1741603397934ts--> <script> (function(){ $(document).ready(function(){ if(0 === 1) { function getBaseUrl(urlString) { const url = new URL(urlString); return url.protocol + '//' + url.host; } const allowedIframeOrigin = getBaseUrl('https://mooore.red'); window.addEventListener('message', function(event) { if (event.origin !== allowedIframeOrigin) { return; } if (event.data && event.data.type === 'LINK_CLICK') { const href = event.data.href; if (typeof href === 'string' && href) { const isAnotherSite = href.startsWith("http") || href.startsWith("https"); if (isAnotherSite) { window.open(href, '_self'); } else { const newUrl = new URL(href, allowedIframeOrigin); window.top.location.href = newUrl.href; } } } }); } let hrefInterval = setInterval(()=>{ let t396List = []; let t396RenderedList = []; document.querySelectorAll('[data-record-type="396"] .t396__artboard').forEach(function(item) { if (!item.parentNode.closest(".r.t-rec")) { t396List.push(item); } }); document.querySelectorAll('[data-record-type="396"] .t396__artboard.rendered').forEach(function(item) { if (!item.parentNode.closest(".r.t-rec")) { t396RenderedList.push(item); } }); if (t396List.length == t396RenderedList.length) { clearInterval(hrefInterval); let hrefList = document.querySelectorAll('[href="#btnPopup"]'); document.addEventListener('click', function(event) { if (event.target.tagName === 'A' && event.target.hasAttribute('href')) { if (event.target.href.includes('#btnPopup')) { event.preventDefault(); openIframePopup(); } } }); } },100); setTimeout(()=>{ if(hrefInterval) { clearInterval(hrefInterval); } },5000); if(false) { createIframe(); preloadIframe(); } }); let iframe = null; let iframeCounter = 0; var overlay = document.createElement('div'); var closeIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var closeIconWrapper = document.createElement('div'); closeIconWrapper.classList.add('closeIconWrapper'); function createIframe() { iframe = document.createElement('iframe'); iframe.classList.add('customIframe926048612'); iframe.style.cssText = " width: calc(100% - 0px); height: calc(100% - 2px); background-color: #fffff; border: none; padding: 0px 0px; "; } function preloadIframe() { iframe.src = 'https://mooore.red'; if(0 === 1) { iframe.onload = function() { const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; iframeDocument.querySelectorAll('a').forEach(function(link) { link.addEventListener('click', function(event) { event.preventDefault(); const href = link.getAttribute('href'); window.parent.postMessage({ type: 'LINK_CLICK', href }, '*'); }); }); }; } overlay.appendChild(iframe); closeIconWrapper.appendChild(closeIcon); overlay.appendChild(closeIconWrapper); document.body.appendChild(overlay); overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; transform: translateY(100%) scale(0.9); z-index: 9999; `; } function openIframePopup() { if(!false && iframeCounter === 0) { createIframe(); preloadIframe(); } iframeCounter+=1; closeIcon.setAttribute("role", "presentation"); closeIcon.setAttribute("class", "t-popup__close-icon"); closeIcon.setAttribute("width", "23px"); closeIcon.setAttribute("height", "23px"); closeIcon.setAttribute("viewBox", "0 0 23 23"); var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); g.setAttribute("stroke", "#a9c7fe"); g.setAttribute("fill", "#ff0000"); g.setAttribute("fill-rule", "evenodd"); var rect1 = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect1.setAttribute("transform", "translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) "); rect1.setAttribute("x", "10.3137085"); rect1.setAttribute("y", "-3.6862915"); rect1.setAttribute("width", "2"); rect1.setAttribute("height", "30"); var rect2 = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect2.setAttribute("transform", "translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) "); rect2.setAttribute("x", "10.3137085"); rect2.setAttribute("y", "-3.6862915"); rect2.setAttribute("width", "2"); rect2.setAttribute("height", "30"); g.appendChild(rect1); g.appendChild(rect2); closeIcon.appendChild(g); closeIconWrapper.classList.add('t-popup__block-close926048612'); closeIcon.style.cssText = " position: absolute; right: 30px; top: 10px; width:30px; height: 30px; border: none; background: #bfbfbf; color: #fff; font-size: 20px; line-height: 30px; text-align: center; cursor: pointer; padding:10px; border-radius:500px; "; setTimeout(() => { overlay.style.opacity = '1'; overlay.style.transform = 'translateY(0) scale(1.0)'; }, 0); if(0) { document.querySelector('.t-body').classList.add('block-scroll'); } } closeIcon.onclick = function(){ closeIframe(); }; closeIconWrapper.onclick = function(e){ if(window.innerWidth <= 768) { closeIframe(); } }; if(1 === 1) { overlay.addEventListener('click', function(e){ if(!iframe.contains(e.target)) { closeIframe(); } }) }; function closeIframe () { overlay.style.opacity = '0'; overlay.style.transform = 'translateY(100%) scale(0.8)'; document.querySelector('.t-body').classList.remove('block-scroll'); } })(); </script> <style> .block-scroll { overflow: hidden; } .t-popup__block-close926048612 { position: fixed; top: 0; right: 0; left: 0; z-index: 2; width: 100%; cursor:pointer; } .t-popup__block-close926048612 .t-popup__close-icon:hover { background: #d1d1d1!important; } @media(max-width:768px) { .t-popup__block-close926048612 { display: flex; justify-content: flex-end; align-items: center; height: 50px; background: #3d434c!important; } .t-popup__block-close926048612 .t-popup__close-icon { background: #b8d1ff!important; right:0px!important; top:0px!important; } .t-popup__block-close926048612 .t-popup__close-icon:hover { background: transparent!important; } .t-popup__block-close926048612 .t-popup__close-icon g { fill:#ff2e2e!important; } .customIframe926048612 { position: absolute; width: 100%!important; height: calc(100% - 50px) !important; top: 50px; } } </style>