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

Question

[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.

Answer 1

[Роман Филиппов]

А почему visability не хочешь попробовать?

Comments

[skuvaWeb]

Я хочу анимацию выплыванию сверху
К тому же свойство visability только скрывает элемент, но оставляет место за ним. Проблема в том что модалка не влезает в экран, это свойство тут не поможет)

[Роман Филиппов]

К чему тогда

Вариант второй:
Использовать display: none;

?

В вашем вопросе очень сложно разобраться, текста много, а сути почти нет.

Вообщем я думаю, что это поможет:

@media (max-width:420px){
.modal{width:auto;}
}

[skuvaWeb]

Использовать display: none; не подходит, не будет анимации всплытия сверху. display не анимируется

Нужно чтобы:
а) была анимация всплытия сверху (да и любая другая)
б) Модалка с большим кол-вом контента адекватно скролилась

Answer 2

[Catrinblaidd]

&.active{
    opacity: 1;
    transform: translate(-50%, 0%);
  }

Comments

[skuvaWeb]

Наверное вы ещё забыли упомянуть что нужно дать свойство top: 0;
Да это работает, но тогда маленькая модалка (в моем примере это "заказать звонок")
Не центрируется

Answer 3

[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%);
  }
}