Заметка создана: 14 января 2025 г.
В XSL шаблон карточки товара над иконкой Избранного добавляем код:
<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show alert-info-modal" role="alert">
<small>Понравился товар? Добавьте его в избранное</small>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>
Блок будет показываться с небольшой задержкой. Для этого используем возможности CSS3
@keyframes showDiv {
0%,
94% {
opacity: 0;
}
95% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
Для кода использованы стили alert фреймворка Bootstrap 5
Закрывается блок нажатием на крестик.
Стили CSS
.alert-wrapper {
display: flex;
justify-content: center;
width: 100%;
}
.alert-info-modal {
background-color: #ff8100;
border: 0;
color: #fff;
position: absolute;
bottom: 95%;
left: 50%;
min-width: 280px;
padding: 10px 15px;
animation: showDiv 3s forwards;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.alert-info-modal:before {
border-width: 0.4rem 0.4rem 0;
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
border-top-color: #ff8100;
top: 100%;
left: 0px;
transform: translate(50px,0px);
}
.alert-info-modal:after {
margin-top: -1px;
transform: rotate(45deg);
}
@keyframes showDiv {
0%,
94% {
opacity: 0;
}
95% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}