Как сделать так, чтобы модальное всплывающее окно прокручивало содержимое страницы?

Question

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

Вместо этого я бы хотел, чтобы всплывающее окно оставалось на месте, а когда пользователь прокручивает вверх или вниз, оно оставляет всплывающее окно на месте и позволяет ему прокручивать содержимое до конца. Если вы сделаете очень длинную запись в Facebook, всплывающее окно будет работать правильно, и я хотел бы знать, как я могу получить такой же эффект с помощью этого элемента управления.

Answer 1

В CSS вашего модального всплывающего окна установите ширину модального окна, затем установите overflow:auto, Это даст вам горизонтальную полосу прокрутки. Пример:

.ModalPopupPanel
{
  width:900px;
  overflow:auto;
}

Таким образом, когда ширина содержимого превышает 900 пикселей, появится горизонтальная полоса прокрутки. То же самое верно для вертикальной полосы прокрутки, где вам нужно установить высоту модальпопа.

Answer 2

Вы можете добавить класс к тегу body, когда всплывающее окно открыто, чтобы скрыть полосу прокрутки, и удалить его, когда всплывающее окно исчезнет, ​​тогда ваш фон должен быть position:fixed и высота должна быть window.height() (получить его). динамически с JS), а также переполнение: авто.

Что происходит со всем этим, так это то, что если всплывающее окно выше фона, вы получаете красивую полосу прокрутки справа, а поскольку ваша полоса прокрутки тела скрыта, вы видите только эту. Кроме того, сама страница не прокручивается. Это то, как Facebook делает это со своей программой просмотра изображений.

Answer 3

Этот скрипт устанавливает высоту всплывающего окна на 90% от высоты экрана, тогда вы можете установить переполнение:auto;

<script type="text/javascript">
  function pageLoad() {
      $get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
  }
    </script> 

здесь связанный вопрос, который я задаю, и решение, которое я нашел.

asp.net ModalPopupExtender: необходимо показать полосу прокрутки при переполнении

Answer 4

Поставить стиль overflow: auto на блоке контейнера.

Answer 5

Вы можете попробовать это для прокрутки modalpopup с его содержимым: установите PopupDragHandleControlID, указывая его на пустую панель, установите Reposition mode = "None", это будет держать модальное положение в том же положении, что и при прокрутке страницы.

Answer 6

Здесь простое и лучшее рабочее решение

Добавьте этот класс на вашу модальную всплывающую страницу.

body.modal-open {
overflow: auto;
}