0

Необходимо сделать модальное окно из элемента слайдера с его контентом. Слайдер для тач устройств.

То есть, кликаешь на элемент слайдера, это окно плавно увеличивается относительно того, на котором кликнули и становится посередине страницы сохраняя свой контент, при этом бэкграунд затемняется.

Моя проблема в том, что не могу придумать как это правильно сделать да еще и с анимацией увеличения на минимум js (без jquery) и максимум css.

Пример

html

<div class="wrapper">
  <div class="slider" style="transform: translate3d(-0px, 0px, 0px);">
    <div class="scenario-large">
  <div class="scenario-large__content__icon"><img alt=""/></div>
  <div class="wrap-container">
    <div class="scenario-large__content__text-large">Параметр 1</div>
    <div class="scenario-large__content__text-small">123</div>
  </div>
</div>
<div class="scenario-large">
  <div class="scenario-large__content__icon"><img alt=""/></div>
  <div class="wrap-container">
    <div class="scenario-large__content__text-large">Параметр 2</div>
    <div class="scenario-large__content__text-small">Параметр</div>
  </div>
</div>
<div class="scenario-large">
  <div class="scenario-large__content__icon"><img alt=""/></div>
  <div class="wrap-container">
    <div class="scenario-large__content__text-large">Параметр 2</div>
    <div class="scenario-large__content__text-small">Параметр</div>
  </div>
</div>
<div class="scenario-large">
  <div class="scenario-large__content__icon"><img  alt=""/></div>
  <div class="wrap-container">
    <div class="scenario-large__content__text-large">Параметр 2</div>
    <div class="scenario-large__content__text-small">Параметр</div>
  </div>
</div>
<div class="scenario-large">
  <div class="scenario-large__content__icon"><img  alt=""/></div>
  <div class="wrap-container">
    <div class="scenario-large__content__text-large">Параметр 2</div>
    <div class="scenario-large__content__text-small">Параметр</div>
  </div>
</div>
  </div>
</div>

css

    .wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 570px;
  height: 250px;
  background: rgba(1, 1, 1, 0.2);
}
.slider {
width: 1250; 
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
}

.scenario-large{
  z-index:2;
  transition: all 0.1s ease-out 0.2s;
  margin-left: 10px;
  min-width: 200px;
  min-height: 120px;
  max-width: 200px;
  max-height: 120px;
  border-radius: 20px;
  background: #F7F7F7;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;

  .scenario-large__content__icon {
    width: 24px;
    height: 24px;
    margin: 15px 0 25px 15px;
    background-color: black;
  }
  .wrap-container {
    margin: 0px 25px 15px 15px;
    .scenario-large__content__text-large {
      font-weight: bold;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
    }
    .scenario-large__content__text-small {
      font-size: 12px;
      color: #858585;
    }
  }
}

1 ответ 1

0

Есть 2 пути решения задачи. Я использовал второй.

  1. Создавать отдельные шаблоны попапа на странице и через js пробрасывать туда данные при клике на элемент слайдера.

  2. Выводить попап с контентом, когда кликаешь на элемента слайдера, но из-за враппера с position:raltive; окно не будет перекрывать все элементы страницы. Для этого при клике высчитывал абсолютную позицию относительно body и через appendChild добавлял этот элемент к body, после чего расширял и ставил на конечную позицию. При закрытие делал appendChild к изначальному врапперу.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.