Как сделать, чтоб фон popup'a был зафиксирован, но сам пуп мог скроллиться?

Question

[sgn_crazushot]

Здравствуйте, вообщем в чем соль:
Можно ли мой пуп , который тут rust-oldschool.ru/magazin/#info-44
Изменить так, чтоб фон popup'a был зафиксирован,
а сам popup можно было скроллить,
короче как в вконтакте (пример: https://vk.com/cfarx_fan?w=wall-103801699_10144 )
Надеюсь на вашу помощь) Заранее Спасибо!)

Answer 1

[Максим Тимофеев]

Надо добавить ему

height: 300px; //какую-то высоту меньшую, чем контент в нем
overflow: scroll; //разрешаем скрол

Comments

[sgn_crazushot]

Хороший вариант, спасибо. А не подскажете,пожалуйста, как зафиксировать фон, я сколько пробовал не получалось.Можете что-нить предложить по такому вопросу?

[Максим Тимофеев]

sgn_crazushot:
css в помощь:
htmlbook.ru/css/background-attachment

[sgn_crazushot]

Максим Тимофеев: пробовал ставить по разному, но что-то не выходит(

[Максим Тимофеев]

sgn_crazushot: выкладывайте на https://jsfiddle.net/ , а то "что-то не выходит" это что-то "не о чем" )))

[sgn_crazushot]

Максим Тимофеев: вообщем вот: https://jsfiddle.net/awqhk7qj/2/ , все основное перенёс. Там просто жмете на игровой предмет, там где: кофта, шапка, ботинки и джинсы изображены и пуп откроется, думаю вы разберётесь )

[Максим Тимофеев]

sgn_crazushot: ок, там серый цвет на фоне, он должен не скролиться?

[sgn_crazushot]

Максим Тимофеев: Он и то что за ним, он же прозрачный и за ним видно элементы

[Максим Тимофеев]

sgn_crazushot: Что бы то что за ним не скролилось, надо что бы оно не получало скрола, когда открыт popup. Для этого обычно делают элемент во весь экран фиксированный, которы находится между popup и контентом.

[sgn_crazushot]

Максим Тимофеев: ну это понятно, но я уже ставил по разному, но почему-то не получилось, я по-этому и написал суда

Answer 2

[Антон]

<div class="modal-wrapper">
    <div class="modal">content</div>
  </div>

.modal-wrapper {
    position: fixed;
    z-index: 99999;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, .5);
  }
  .modal {
    width: 500px;
    max-width: 100vw;
    background-color: #fff;
  }