Инструкция
- Cоздайте зеро блок в любом месте вашей страницы или в header, если у вас многостраничный тильда сайт
- Откройте настройки зеро блока, нажмите на «BLOCK CSS CLASS NAME», в появившемся поле введите класс «uc-banner»
- Откройте редактор зеро блока и удалите из него все элементы
- Удалите фоновую заливку блока
- В поле «WINDOW CONTAINER HEIGHT, %» пропишите цифру «100»
- Найдите пункт настроек «POSITION AND OVERFLOW» и в подменю «POSITION» выберите «Fixed»
- Создайте ваш баннер любым удобным для вас способом
- На баннере создайте элемент, который будет закрывать ваш баннер
- Нажмите правой кнопкой мыши на этот элемент и выберите «Add CSS Class Name»
- В появившемся поле пропишите класс «close-banner»
- ВАЖНО! Все элементы, из которых состоит баннер, включая кнопку закрытия, должны быть добавлены в WINDOW CONTAINER! Для этого нажмите на «+CONTAINER», в подменю «CONTAINER» выберите «Window Container»
- «AXIS X» и «AXIS Y» настройте в соответствии с тем, где именно вы хотите расположить баннер. Например, если баннер должен быть расположен в правом нижнем углу, то в «AXIS X» и «AXIS Y» нужно выбрать «Right» и «Bottom»
- После того, как настроите ваше баннер, сохраните и закройте зеро блок
- После всех блоков на странице или в header создайте html блок «Т123»
- Нажмите не кнопку «Контент», скопируйте туда код модификации и опубликуйте страницу
Демо
<style>
.uc-banner {
transition: opacity 0.5s ease-out;
z-index: 9999999999999999;
}
.close-banner {
cursor: pointer;
user-select: none;
}
.fade-out {
opacity: 0;
visibility: hidden;
height: 0 !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var banner = document.querySelector('.uc-banner');
var closeButton = document.querySelector('.close-banner');
if (banner && closeButton) {
// Проверяем, есть ли в sessionStorage информация о закрытии баннера
if (sessionStorage.getItem('bannerClosed') === 'true') {
banner.classList.add('fade-out');
}
// Обработчик события нажатия на кнопку закрытия
closeButton.addEventListener('click', function() {
banner.classList.add('fade-out');
// Сохраняем информацию о том, что баннер закрыт
sessionStorage.setItem('bannerClosed', 'true');
});
} else {
console.error('Элемент не найден на странице.');
}
});
</script>
