В веб-разработке модальные окна — это удобный инструмент для отображения дополнительного контента без перехода с текущей страницы. Однако когда контент внутри модального окна становится слишком длинным, он может переполниться и стать недоступным для пользователей. В этой статье мы рассмотрим различные методы создания модального контента с возможностью прокрутки в Bootstrap 5, а также приведем соответствующие примеры кода.

Метод 1: использование CSS Max-Height и Overflow
Самый простой способ добиться прокручиваемого модального контента — использовать CSS для установки максимальной высоты контейнера контента и включения переполнения. Вот пример:

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-body" >
      <!-- Content goes here -->
    </div>
  </div>
</div>

Метод 2: добавление пользовательских классов CSS
Bootstrap 5 предоставляет дополнительные служебные классы, которые можно применять к модальным элементам, чтобы сделать их прокручиваемыми. Добавив класс modal-dialog-scrollableв модальное диалоговое окно и класс modal-content-scrollableв модальное содержимое, содержимое автоматически станет прокручиваемым.

<div class="modal-dialog modal-dialog-scrollable">
  <div class="modal-content modal-content-scrollable">
    <div class="modal-body">
      <!-- Content goes here -->
    </div>
  </div>
</div>

Метод 3: прокручиваемое модальное окно с настраиваемой полосой прокрутки
Если вы хотите настроить внешний вид полосы прокрутки, вы можете использовать стороннюю библиотеку, например PerfectScrollbar. Сначала включите в свой HTML необходимые файлы CSS и JavaScript, а затем примените класс ps-overflow-yк модальному элементу body. Вот пример:

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-body ps-overflow-y">
      <!-- Content goes here -->
    </div>
  </div>
</div>

Метод 4: прокручиваемое модальное окно с помощью встроенного JavaScript Bootstrap
Если вы предпочитаете использовать JavaScript, вы можете сделать модальное содержимое прокручиваемым программно с помощью библиотеки Bootstrap Native. Включите файл bootstrap.native.min.jsи добавьте следующий код JavaScript:

var modalContent = document.querySelector('.modal-content');
modalContent.classList.add('overflow-auto');

В этой статье мы рассмотрели несколько методов создания модального контента с возможностью прокрутки в Bootstrap 5. Используя CSS, пользовательские классы или сторонние библиотеки, вы можете гарантировать, что ваш модальный контент останется доступным для пользователей, даже если он превышает доступный космос. Учитывайте требования вашего проекта и выберите метод, который лучше всего соответствует вашим потребностям.