Я использую модал начальной загрузки в моем приложении, которое может иметь длинный контент. У меня есть 2 модальности на разных страницах. Когда я смотрю мой модал на мобильных устройствах, я могу прокрутить один из моих модальных, но мой второй модальный не может быть прокручен. Когда я пытаюсь прокрутить его, фон прокручивается вместо этого. Даже когда я щелкаю внутри модала, кажется, что модал не в фокусе. Я думал, что я должен добавить разные модальные свойства в каждом из моих модальных, но модальный код одинаков для обоих, что-то вроде:

{amp}lt;div class="modal fade" id="modalFeedback" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"{amp}gt; {amp}lt;div class="modal-dialog modal-lg modal-dialog-centered" role="document"{amp}gt; 

Я не уверен, почему это происходит

Пожалуйста, попробуйте этот код, он работает правильно:

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;title{amp}gt;Bootstrap Example{amp}lt;/title{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt; {amp}lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;br{amp}gt;{amp}lt;br{amp}gt;{amp}lt;br{amp}gt; {amp}lt;!-- Button trigger modal --{amp}gt; {amp}lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable"{amp}gt; Launch demo modal {amp}lt;/button{amp}gt; {amp}lt;!-- Modal --{amp}gt; {amp}lt;div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"{amp}gt; {amp}lt;div class="modal-dialog modal-dialog-scrollable" role="document"{amp}gt; {amp}lt;div class="modal-content"{amp}gt; {amp}lt;div class="modal-header"{amp}gt; {amp}lt;h5 class="modal-title" id="exampleModalScrollableTitle"{amp}gt;Modal title{amp}lt;/h5{amp}gt; {amp}lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"{amp}gt; {amp}lt;span aria-hidden="true"{amp}gt;{amp}amp;times;{amp}lt;/span{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-body"{amp}gt; {amp}lt;p{amp}gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="modal-footer"{amp}gt; {amp}lt;button type="button" class="btn btn-secondary" data-dismiss="modal"{amp}gt;Close{amp}lt;/button{amp}gt; {amp}lt;button type="button" class="btn btn-primary"{amp}gt;Save changes{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

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

Спасибо.