Исправлена ​​модальная прокрутка при переполнении области просмотра - PullRequest
Новая
       51

Исправлена ​​модальная прокрутка при переполнении области просмотра

0 голосов
/ 26 мая 2018

выпуск

Я сделал фиксированный мод для отображения поверх основного содержимого страницы.Модал имеет содержимое, высота которого может в конечном итоге превышать область просмотра, и поэтому ему необходимо прокручиваться, но он просто не работает.

Содержимое модального элемента

В пределах модального значения

  1. Пустой оверлей / background div с серым фоном, который занимает всю ширину и высоту модала.
  2. Сам контент, который может в итоге иметь высоту, превышающую область просмотра.

JS Fiddle

Вот JS Fiddle, демонстрирующая проблему.Я добавил окраску границ, чтобы лучше различать отдельные элементы.

https://jsfiddle.net/mLjs49ms/7/

1 Ответ

0 голосов
/ 26 мая 2018

Вам необходимо добавить свойства css в modal__content : 

  position:relative;
  overflow:auto;
  height:100%;
  • z-index не применялся, поскольку позиция была статической, поэтому вам нужно добавить position:relative
  • и для активации прокрутки необходимо добавить overflow:auto и фиксированный height из 100%
  • Не забывая, вы должны исправить height модального родителя модальный до 100%, а также

См. Результат: 

html,
body {
  width: 100%;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: consolas;
}

.main {
  border: 2px solid blue;
}

.modal {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid red;
}

.modal__overlay {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(138, 138, 138, 0.5);
  border: 2px dashed green;
}

.modal__content {
  z-index: 2;
  border: 2px dotted blue;
  position: relative;
  overflow: auto;
  height: 100%;
}

.simulate-content {
  width: 120px;
  height: 200px;
  margin: 12px auto;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  background-color: rgb(255, 50, 50);
}
<body>
  <!-- PLACEHOLDER CONTENT -->
  <div class='main'>
    <h3> BODY CONTENT </h3>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

  <!-- THE MODAL -->
  <div class='modal'>
    <div class='modal__overlay'></div>
    <div class='modal__content'>
      <p class='simulate-content'>MODAL CONTENT 1 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 2 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 3 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 4 of 5</p>
      <p class='simulate-content'>MODAL CONTENT 5 of 5</p>
    </div>
  </div>
</body>
...