Неочевидные моменты, подсказки и иные дополнительные данные¶

Описание DOM модели кнопки¶

Базовая схема элементов кнопки

#probtn_wrapper¶

Базовый элемент, внутри которого «содержится» кнопка, активные зоны и блок с дополнительными элементами (предзагруженными картинками, трекинговыми ссылками, изображением зоны закрытия и т.д.)

iframe#probtn_guidIframe¶

Iframe, который используется для глобального отслеживания пользователя на всех сайтах, где есть код.

div#probtn_additionalItemsContainer¶

В данный div добавляются все дополнительные элементы, что требуются для работы кнопки (предзагруженными картинками, трекинговыми ссылками, изображением зоны закрытия и т.д.)

div#probtn_button¶

Элемент, внутри которго непосредственно находятся картинкаiframe кнопки, подпись и иные элементы необходимые для корректной работы и отображения кнопки.

#pizzabtnImg¶

Картинка или iframe (c html креативом) кнопки

Tips&tricks¶

Добавление класса для fancybox при готовности страницы в iframe¶

При открытии fancybox модального окна после загрузки iframe страницы для div с классом .fancybox-inner добавляется класс opened (для пометки того что страница в iframe загружена и мы можем изменить какие-либо стили, к примеру убрать фон)

Скрытие кнопки закрытия модального окна¶

Для скрытия кнопки закрытия модального окна (к примеру в случае, если страница внутри iframe сама реализует закрытие модального окнакнопки используя механизм postMessage) можно добавить в параметр Z Custom CSS (или непосредственно на сайт) следующие CSS стили:

.fancybox-close {
        display: none;
        top: 0px !important;
        right: 0px !important;
}