0

Есть следующее модальное окно:

.cart-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 29;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .85);
}

.cart {
  position: relative;
  z-index: 30;
  margin: 30px auto;
  height: 1100px;
  padding: 35px;
  background: #fff;
  max-width: 700px;
  overflow: auto;
}

.cart__info {
  margin-top: 900px;
}
<div class="cart-container">
  <div class="cart">
    <div class="cart__header">Оформление заказа</div>
    <div class="cart__product">Продукт</div>
    <div class="cart__upsales">Апсейлс</div>
    <div class="cart__info">Инфо</div>
  </div>
</div>

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

CP: https://codepen.io/Alexxosipov/pen/WyEaQe

1
  • Мб., max-height?
    – vp_arth
    14 июн 2018 в 23:21

1 ответ 1

0

Сделайте overlay отдельным блоком и задайте ему стили cart-container. Это самый простой пример. Если хотите более бодробно изучить, просмотри код уже готовых плагинов(Magnific и тп).

.g-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 29;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .85);
  //overflow: hidden;
}

.cart {
  position: relative;
  z-index: 30;
  margin: 30px auto;
  //height: 1100px;
  padding: 35px;
  background: #fff;
  max-width: 700px;
  //overflow: auto;
  height: auto;
}

.cart__info {
  margin-top: 900px;
}
<div class="g-overlay"></div>
<div class="cart-container">
  <div class="cart">
    <div class="cart__header">Оформление заказа</div>
    <div class="cart__product">Продукт</div>
    <div class="cart__upsales">Апсейлс</div>
    <div class="cart__info">Инфо</div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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