Модальное окно. Слайдер.
<div class="slide-modal" id="exampleModal">
<div class="slide-modal-content bg-catalog">
<div class="slide-modal-header">
<h5 class="modal-title">Скачать каталог</h5>
<button type="button" class="close" data-dismiss="slide-modal" aria-label="Закрыть"></button>
</div>
<div class="slide-modal-body">
<p>Каталог скачивается. Вы найдёте его в папке с загрузками. Мы пришлём прайс с оптовыми скидками, если вы оставите свои контакты.</p>
</div>
</div>
</div>
/*
Slide Modal
*/
$('a[data-toggle="slide-modal"]').click(function(e) {
e.preventDefault();
let target = $(this).data('target');
showSlideModal(target);
})
$('.slide-modal').click(function(e) {
if (e.target !== this)
return;
let target = $(this).attr('id');
hideSlideModal(target);
})
$('.close[data-dismiss="slide-modal"]').click(function(e) {
let target = $(this).closest('.slide-modal').attr('id');
console.log('Click! ' + target);
hideSlideModal(target);
})
function showSlideModal(target) {
let width = $(window).width();
$('body').css('max-width', width).css('overflow', 'hidden');
$(target).fadeIn(200, function() {
$(target).addClass('show');
});
}
function hideSlideModal(target) {
$('body').css('max-width', '').css('overflow', 'inherit');
$('#' + target).removeClass('show');
$('#' + target).fadeOut(200);
}
.slide-modal {
position: fixed;
background-color: rgba(0, 0, 0, .8);
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
&.show {
display: block;
}
}
.slide-modal-content {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 540px;
overflow: auto;
background-color: #fff;
z-index: 1001;
transform: translateX(-150px);
transition: all .5s;
opacity: 0;
padding-left: 70px;
padding-right: 45px;
padding-top: 60px;
padding-bottom: 60px;
// @include media-breakpoint-down(md) {
// width: 300px;
// }
.show & {
transform: translateX(0);
opacity: 1;
}
}
.slide-modal-header {
// position: relative;
}
.close {
cursor: pointer;
position: absolute;
display: inline-block;
width: 30px;
height: 30px;
overflow: hidden;
background-color: transparent;
border: none;
transition: all .3s ease-out;
&:hover {
transform: rotate(180deg);
&::before, &::after {
background: #000;
}
}
&::before, &::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background: #000;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
&.big {
transform: scale(3);
}
&.hairline {
&::before, &::after {
height: 1px;
}
}
&.thick {
&::before, &::after {
height: 4px;
margin-top: -2px;
}
}
.slide-modal-header & {
top: 30px;
right: 30px;
}
}