1

Есть модальное окно (display: flex), содержимое которого выровнено по центру экрана (justify-content: center; align-items: center). На больших экранах всё смотрится и работает как надо. Но на мобильных устройствах, высота которых меньше содержимого, контент обрезается сверху и снизу. В частности, недоступна кнопка "закрыть окно".

1. Почему не появляется полоса прокрутки? Чем объясняется такое поведение flexbox?

2. Можно ли в рамках flex решить эту проблему? Или придётся выравнивать содержимое иначе, без использования flex?

$('.open-btn').click(function(){
  $('.modal-window').css('display','flex');
})
$('.close-btn').click(function(){
  $('.modal-window').css('display','none');
})
.modal-window {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1cacf3;
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal-content {
  width: 200px;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
}
.modal-content .close-btn {
  cursor: pointer;
  float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="open-btn">Открыть окно</button>
<div class="modal-window">
  <div class="modal-content">
      <p class="close-btn">Закрыть</p>
      <h1>Заголовок модального окна</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

0

3 ответа 3

4

Выравнивайте не через justify-content и align-items, а margin: auto для .modal-content. Ну и overflow: auto для .modal-window

$('.open-btn').click(function(){
  $('.modal-window').css('display','flex');
})
$('.close-btn').click(function(){
  $('.modal-window').css('display','none');
})
.modal-window {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1cacf3;
  z-index: 2;
  display: none;
  overflow: auto;
}
.modal-content {
  width: 200px;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
  margin: auto;
}
.modal-content .close-btn {
  cursor: pointer;
  float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="open-btn">Открыть окно</button>
<div class="modal-window">
  <div class="modal-content">
      <p class="close-btn">Закрыть</p>
      <h1>Заголовок модального окна</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

2
  • Благодарю Вас :) 20 июн 2019 в 11:02
  • @zhurof Хороший, добротный ответ (+) Всё чётко и ясно 20 июн 2019 в 21:00
1

Да, вам правильно посоветовали выравнивать через margin: auto;. Для устранения бага в IE, когда окно растягивается по высоте, используйте для модального окна align-self: center;

-1

  @media screen and (max-width: 200px) {
  .modal-content {
    overflow: scroll;
  }

Попробуйте к вашему коду добавить медиа-запрос введите сюда описание изображения

3
  • а Вы сами попробовали, прежде чем давать ответ? :) 20 июн 2019 в 5:55
  • @humster_spb, добавил скрин. Текст же удлиняется, или надо именно полосу прокрутки? 20 июн 2019 в 6:03
  • Ну, Вы мой пример воспроизвели? Увидели, в чём там проблема? Если Ваш ответ работает, сделайте такой же воспроизводимый сниппет. Я попробовал добавить - у меня ничего не произошло. max-width: 200px тут вообще не при чём - обрезается по высоте (тогда уж max-height) 20 июн 2019 в 6:06

Ваш ответ

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

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