<!-- 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">×</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/), но я получил модальное окно, которое выходит за пределы высоты области просмотра.






Я просмотрел документацию 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">×</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, обновление, вероятно, является лучшим долгосрочным решением.