@skuvaWeb

Проблема с модальным окном?

На вас вся надежда, ребят.
https://codepen.io/SkuvaWeb/pen/Oodvpv

Суть проблемы в следующем. Я делаю модальное окно. По дефолту (без класса active) я убираю его наверх, с помощью transform: translate(-50%, - 200%); Затем, при добавлении ему класса active, центрирую его относительно overlay. Вот тут и проблема.

Вариант центрирования первый:

задать модалке top: 50%; left: 50%; transform: translate(-50%, -50%);

НО! Если высота модалки больше чем высота экрана, скролл появляется, но модалка влезает не целиком (скролл есть, но не влезает название модалки, просто обрезается экраном, понять не могу почему так). Этот вариант и исполнен на codepen. Нужно либо скорректировать этот способ(сомневаюсь, что это возможно), либо предложить новый.

Вариант второй:

Использовать display: none; для модалок неактивных, центрировать с помощью задания флекса родителю (overlay) - не подходит, не будет анимации всплытия сверху. display не анимируется.

Вариант третий:

Методы fadeIn, fadeOut jqeury тоже не подходят, хочу иметь возможность менять свою анимацию через css.
  • Вопрос задан
  • 118 просмотров
Пригласить эксперта
Ответы на вопрос 3
Webram
@Webram
Я есть
А почему visability не хочешь попробовать?
Ответ написан
@Catrinblaidd
&.active{
    opacity: 1;
    transform: translate(-50%, 0%);
  }
Ответ написан
@skuvaWeb Автор вопроса
Проблему решил следующим образом.
Каждое модальное окно оборачивается в свой overlay

И применил следующие стили
.overlay{
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0 , .8);
  overflow-y: auto;
  z-index: -2;
  opacity: 0;
  transition: .3s;
  display: flex;
  &.active{
    z-index: 9;
    opacity: 1;
  }
}

.modal{
  margin: auto;
  position: relative;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  background-color: #fff;
  opacity: 0;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  transition: .3s;
  transition-delay: .3s;
  &.active{
    opacity: 1;
    transform: translateY(0%);
  }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы