Модальное окно не прокручивается

<!-- Modal -->
	<div class = "modal fade" id = "exampleModalScrollable" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalScrollableTitle" aria-hidden = "true">
	  <div class = "modal-dialog modal-dialog-scrollable" role = "document">
	    <div class = "modal-content">
	      <div class = "modal-header">
	        <h5 class = "modal-title" id = "exampleModalScrollableTitle">Modal title</h5>
	        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
	          <span aria-hidden = "true">&times;</span>
	        </button>
	      </div>
	      <div class = "modal-body">
	        Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing 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.
	      </div>
	      <div class = "modal-footer">
	        <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
	        <button type = "button" class = "btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>

Я использую шаблон, предоставленный Bootstrap, для создания прокручиваемого модального окна на моем веб-сайте, но он не дает мне полосу прокрутки. Модальное окно просто выходит за пределы высоты области просмотра.

Я пробовал пример кода начальной загрузки, и он не работает.

Я ожидал прокручиваемого модального окна, как показано в демонстрации (https://getbootstrap.com/docs/4.3/components/modal/), но я получил модальное окно, которое выходит за пределы высоты области просмотра.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
64
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я просмотрел документацию Bootstrap, на которую вы указали, и весь ваш код показался точным. Используя инструмент разработчика браузера, я увидел, что модальное окно имеет максимальную высоту. Это все еще не сработало. Я наткнулся на эта статья, который предполагает, что это ошибка в Chrome, и способ ее исправить — установить максимальную высоту в классе модального тела и установить overflow-y для прокрутки:

.modal-body {
  max-height: 50vh;
  overflow-y: scroll;
}
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">

<button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalScrollable">
  Launch modal
</button>


<!-- Modal -->
<div class = "modal fade" id = "exampleModalScrollable" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalScrollableTitle" aria-hidden = "true">
  <div class = "modal-dialog modal-dialog-scrollable" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">
        <h5 class = "modal-title" id = "exampleModalScrollableTitle">Modal title</h5>
        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
	          <span aria-hidden = "true">&times;</span>
	        </button>
      </div>
      <div class = "modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing
        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.Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </div>
      <div class = "modal-footer">
        <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">Close</button>
        <button type = "button" class = "btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>

Я также столкнулся с этим, используя Bootstrap 4.0.0, и ответ MichaelvE исправляет это. Но проблема исчезла при использовании последней версии Bootstrap 4.3.1. Поскольку кажется, что такое поведение на самом деле является ошибкой Bootstrap, обновление, вероятно, является лучшим долгосрочным решением.

Другие вопросы по теме