1

Делаю модальное окно. Сейчас оно имеет вот такой вид:

<div>
  <div class="background"/>
  <div class="modal">
    <div class="modalBodyWrapper">
      <!-- Место для контента -->
    </div>
  </div>
<div/>

Стили CSS:

.background {
    z-index: 990;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
}

.modal {
    z-index: 1000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background-color: #fff;
    width: 540px;
    max-width: 100%;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
    border-radius: 5px;
}

.modalBodyWrapper {
    display: flex;
    flex-direction: column;
}

Всё это дело хорошо работает на маленьких окнах: введите сюда описание изображения

И, что вполне ожидаемо, отвратительно работает на окнах, которые длиннее, чем высота экрана: введите сюда описание изображения Скроллинг не влияет, окно остаётся в таком же положении, сколько колёсико не крути.

Что необходимо:

Если окно очень длинное, то оно должно открываться вот так: введите сюда описание изображения

И должно прокручиваться (причём желательно, чтобы контент за окном не прокручивался) до конца: введите сюда описание изображения

Обратите внимание!

  1. Прокручивается не контент внутри модального окна, а само окно.
  2. Окно не просто прокручивается до конца, снизу него ещё и должен оставаться отступ.
  3. Нигде не должен отображаться ползунок прокрутки.
  4. Контент за окном не должен прокручиваться.

Каким образом мне следует изменить мой CSS, чтобы добиться такого результата?

2
  • @Sevastopol' я имею в виду, что если контента много, то видно только часть окна. А при прокрутке само окно прокручивается. Нечто похожее на вайлдбериз можно увидеть, если открыть быстрый просмотр товара. Там окно прокручивается, а не контент внутри окна. Например вот здесь: wildberries.ru/catalog/obuv/zhenskaya/… если открыть быстрый просмотр товара, то будет видно. Там правда контент за окном тоже скроллится, ну это уже опционально.
    – Zhenyria
    12 апр 2021 в 15:17
  • @Sevastopol' не уверен, что здесь нужен js. Но если вы уверены, что без него не обойтись, могу добавить метку
    – Zhenyria
    12 апр 2021 в 15:17

1 ответ 1

3

.background {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
}

.modal {
  z-index: 11;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-color: #fff;
  width: 540px;
  max-width: 100%;
  height: 50vh;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  border-radius: 0px;
}

.modalBodyWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-right: 60px;
  overflow: hidden auto;
}

.modalBodyWrapper>div {
  padding: 30px;
  background: url(https://i.imgur.com/LmX45XA.jpeg);
}
<div> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
</div>

<div class="background" />
<div class="modal">
  <div class="modalBodyWrapper">
    <div>
      <!-- Место для контента -->1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
    </div>
  </div>
</div>

upd/

Нечто похожее на вайлдбериз можно увидеть, если открыть быстрый просмотр товара. Там окно прокручивается, а не контент внутри окна. Например вот здесь: wildberries.ru/catalog/obuv/zhenskaya/… если открыть быстрый просмотр товара, то будет видно. Там правда контент за окном тоже скроллится, ну это уже опционально. – Zhenyria

Там сделано просто, вот так:

body{margin: 0; padding: 0;}

.wrp {
position:relative;
}

.background {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.55);
}

.modal {
  z-index: 11;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  overflow: hidden;
  background-color: #fff;
  width: 540px;
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  border-radius: 0px;
}

.modalBodyWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.modalBodyWrapper>div {
  padding: 30px;
  background: url(https://i.imgur.com/LmX45XA.jpeg);
}
<div class="wrp"> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1

<div class="background">
<div class="modal">
  <div class="modalBodyWrapper">
    <div>
      <!-- Место для контента -->1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
    </div>
  </div>
</div>

</div>

upd2/

А как вот всё-таки здесь например смогли сделать: dombotinka.ru , тут если накидать много товаров в корзину и потом открыть её (т.е. добиться того, чтобы окно корзины стало длиннее высоты экрана), то само окно корзины прокручивается. В принципе похоже на ваш первый вариант, это ведь он и есть, да? Просто модальное окно засовываем в ещё одну обёртку получается. – Zhenyria

И здесь ничего особенного, вот так:

.background {
  z-index: 10;
  position: fixed;
  overflow: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}

.modal {
  z-index: 11;
  margin: 0 auto;
  margin-top: 50px;
  background-color: #fff;
  width: 540px;
  max-width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
  border-radius: 0px;
}

.modalBodyWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}

.modalBodyWrapper>div {
  padding: 30px;
  background: url(https://i.imgur.com/LmX45XA.jpeg);
}
<div> 1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
</div>

<div class="background" />
<div class="modal">
  <div class="modalBodyWrapper">
    <div>
      <!-- Место для контента -->1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
    </div>
  </div>
</div>

2
  • 1
    Прокручивается не контент внутри модального окна, а само окно. ТС хочет не прокрутку контента, а прокрутку самого окна с контентом, без изменения на странице (чтобы скролл модального окна не затрагивал скролл самой страницы)
    – InDevX
    12 апр 2021 в 15:14
  • @Sevastopol' да, действительно работает. А как вот всё-таки здесь например смогли сделать: dombotinka.ru , тут если накидать много товаров в корзину и потом открыть её (т.е. добиться того, чтобы окно корзины стало длиннее высоты экрана), то само окно корзины прокручивается. В принципе похоже на ваш первый вариант, это ведь он и есть, да? Просто модальное окно засовываем в ещё одну обёртку получается.
    – Zhenyria
    12 апр 2021 в 19:35

Ваш ответ

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

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