Записи с меткой "Bootstrap 5"
Bootstrap 5.3. Закрыть cворачиваемое содержимое при клике вне элемента
<button class="btn btn-primary show-element" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Кнопка с data-target
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Кстати, диаграммы связей, вне зависимости от их уровня, должны быть рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок. Каждый из нас понимает очевидную вещь: высокотехнологичная концепция общественного уклада в значительной степени обусловливает важность существующих финансовых и административных условий. И нет сомнений, что некоторые особенности внутренней политики лишь добавляют фракционных разногласий и объявлены нарушающими общечеловеческие нормы этики и морали. Банальные, но неопровержимые выводы, а также независимые государства формируют глобальную экономическую сеть и при этом — подвергнуты целой серии независимых исследований.
</div>
</div>
$(document).mouseup( function(e){ // событие клика по веб-документу
var div = $( "#collapseExample.show" ); // здесь указываем сворачиваемое содержимое
if ( !div.is(e.target) // если клик был не по нашему сворачиваемому содержимому
&& div.has(e.target).length === 0 ) { // и не по его дочерним элементам
$('.show-element').addClass('collapsed'); // добавляем кнопке класс .collapsed
$('.propertyInput.show').removeClass('show'); // удаляем у сворачиваемого содержимого класс .show
}
});
Плавающий блок с призывом добавить товар в Избранное (на Bootstrap)
В 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;
}
}