Автоматически появляющийся HTML-баннер

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

1 Вставьте в HTML-блок на странице код:

<div class="auto-popup-inner">
 <div class="auto-popup">
  <div class="text-container relative">
  <div class="close-popup">
  <span></span> <span></span>
</div>
  <div class="text-container"><div class="block-text has-rtl is-heading">
    Telegram-канал<br/>
Besttaplink
    </div></div>
    <div class="text-container"><div class="block-text has-rtl simple-text">
Подпишитесь на наш Telegram-канал и получайте иформацию о новых продуктах первыми
    </div></div>
    <div class="image-container">
    <img src="https://taplink.st/p/5/d/1/f/63112380.jpg?0"/></div>
     <div class="buttons-container">
    <a class="dismiss-modal btn-ghost">
      Отменить
       </a>
       <a class="btn-go" href="https://t.me/taplinkbest" target="_blank">
      Перейти
       </a>
    </div>
</div>
</div> 
</div>
<script>
setTimeout(()=>{
document.querySelector('.auto-popup-inner').style.display='block';
 
},1000)
   document.querySelector('.close-popup').onclick = ()=>{
  document.querySelector('.auto-popup-inner').style.display='none';
  }
   document.querySelector('.dismiss-modal').onclick = ()=>{
  document.querySelector('.auto-popup-inner').style.display='none';
  }
</script>

<style>.auto-popup-inner {
  --primary-color: #FF6E0A;
  --cta-color: white;
  --grid-min: 0.25rem;
  --grid-small: 0.5rem;
  --grid-medium: 0.75rem;
  --grid-standart: 1rem;
  --grid-large: 1.5rem;
  --grid-extra: 2rem;
  --min-height:3rem;
  position: fixed;
  display: none;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(320px, calc(100% - 2rem), 820px);
  border-radius: var(--grid-medium);
  background: var(--primary-color);
  z-index: 10000;
  padding: var(--grid-min);
}
.auto-popup-inner .auto-popup {
  border-radius: var(--grid-medium);
  background: #FFF;
  padding: var(--grid-large);
}
.auto-popup-inner .auto-popup .close-popup {
  float: right;
  width: var(--grid-extra);
  height: var(--grid-extra);
  border: 1px solid var(--primary-color);
  border-radius: var(--grid-min);
  position: relative;
  cursor: pointer;
}
.auto-popup-inner .auto-popup .close-popup:hover span {
  width: 80%;
}
.auto-popup-inner .auto-popup .close-popup span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 2px;
  border-radius: var(--grid-min);
  background: var(--primary-color);
  translate: -50% -50%;
  transition: 0.2s;
}
.auto-popup-inner .auto-popup .close-popup span:first-child {
  rotate: 45deg;
}
.auto-popup-inner .auto-popup .close-popup span:last-child {
  rotate: -45deg;
}
  .auto-popup-inner .auto-popup .image-container {
  text-align:center;
  }
.auto-popup-inner .auto-popup .text-container, .auto-popup-inner .auto-popup .image-container, .auto-popup-inner .auto-popup .buttons-container {
  padding-top: var(--grid-large);
}
.auto-popup-inner .auto-popup .is-heading {
  line-height: var(--theme-text-lineheight-h2);
  font-size: var(--theme-text-size-h2);
  letter-spacing: var(--theme-text-letterspacing-h2);
  text-align: center;
}
.auto-popup-inner .auto-popup .simple-text {
  text-align: center;
  line-height: var(--theme-text-lineheight-md);
  font-size: var(--theme-text-size-md);
  letter-spacing: var(--theme-text-letterspacing-md);
}
.auto-popup-inner .auto-popup .buttons-container {
  display: flex;
  gap: var(--grid-large);
  align-items: center;
}
.auto-popup-inner .auto-popup .buttons-container a {
  flex: 1 1 auto;
  display: flex;
  min-height: var(--min-height);
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  font-family: var(--theme-link-title-font-family);
  font-weight: var(--theme-link-title-font-weight);
  font-size: var(--theme-link-title-fontsize);
  line-height: var(--theme-link-title-lineheight);
  letter-spacing: var(--theme-link-title-letterspacing);
  text-transform: var(--theme-link-title-transform);
  border-radius: var(--grid-medium);
}
.auto-popup-inner .auto-popup .buttons-container a.btn-ghost {
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.auto-popup-inner .auto-popup .buttons-container a.btn-ghost:hover {
  background: var(--primary-color);
  backdrop-filter: blur(1.5px);
  color: var(--cta-color);
}
.auto-popup-inner .auto-popup .buttons-container a.btn-go {
  background: var(--primary-color);
  backdrop-filter: blur(1.5px);
  color: var(--cta-color);
}
.auto-popup-inner .auto-popup .buttons-container a.btn-go:hover {
  opacity: 0.9;
}
.relative {
  position: relative;
}
</style>

В этом коде заголовок соответствует стандартным настройкам заголовка в Taplink. Если вы хотите сменить в нем шрифт, цвет и другие параметры, оберните код в секцию и настройте эти параметры там

2 Вы можете заменить основной цвет и размер сетки в самом коде. Для этого найдите в коде место с таким кодом:

--primary-color: #FF6E0A;
  --cta-color: white;
  --grid-min: 0.25rem;
  --grid-small: 0.5rem;
  --grid-medium: 0.75rem;
  --grid-standart: 1rem;
  --grid-large: 1.5rem;
  --grid-extra: 2rem;
  --min-height:3rem;

И замените #FF6E0A на свой код цвета. white отвечает за цвет текста в кнопке, а остальные параметры отвечают за расстояние между элементами. Они составлены в соответствии с 4-х пиксельной сеткой

3 Чтобы заменить задержку в появлении блока (стандартно он появляется спустя 1 секунду после загрузки страницы, найдите в коде такую строку

setTimeout(()=>{
document.querySelector('.auto-popup-inner').style.display='block';
},1000)

И замените 1000 на свою задержку в милисекундах

4 Для того, чтобы заменить ссылку в кнопке на свою, найдите в коде такое место:

 <a class="btn-go" href="https://t.me/taplinkbest" target="_blank">
      Перейти
       </a>

И замените https://t.me/taplinkbest на свою ссылку

5 Для замены картинки найдите в коде такую строку:

<img src="https://taplink.st/p/5/d/1/f/63112380.jpg?0"/>

И замените ссылку на картинку. Как получить ссылку на картинку