scss 幻灯片模式

Posted 2021-05-17

<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;
  }
}