引导程序模式中的滚动问题：仅在使用衰落类时

Question

I have spent a number of hours debugging this problem. 我花了几个小时来调试此问题。 Here is what I am doing: 这是我在做什么：

I open a bootstrap modal 我打开一个引导模态
From within that modal, I open another modal (I use the data-dismiss attribute to ensure the existing modal is closed first) 从该模式中，我打开另一个模式（我使用data-dismiss属性来确保首先关闭现有模式）
If the second modal is very large and requires scrolling, then this fails. 如果第二个模态很大并且需要滚动，则失败。 Instead of scrolling the modal, the background scrolls. 背景滚动而不是滚动模态。

Code used for opening the new modal from within the existing modal: 用于从现有模式中打开新模式的代码：

<button type="button" class="btn btn-secondary" data-toggle="modal" data-dismiss="modal" data-target="#modal2">Open modal 2</button>

What I have found out is that the problem occurs when I apply the "modal fade" class to the modal. 我发现，当我将“模态淡入”类应用于模态时，就会出现问题。 If I remove the "fade" class then it all works well! 如果我删除“ fade”类，那么一切正常！ But I would really like to use the fade class. 但是我真的很想使用衰落类。 Is this supposed to be like this? 这应该是这样吗？ Or is there a workaround? 还是有解决方法？ Below a full working example: 下面是一个完整的工作示例：

 .modal-body { height: 1000px }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <body> <button data-toggle="modal" data-target="#modal1">Open modal</button> <div class="modal fade" tabindex="-1" role="dialog" id="modal1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal 1</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-toggle="modal" data-dismiss="modal" data-target="#modal2">Open modal 2</button> </div> </div> </div> </div> <div class="modal fade" tabindex="-1" role="dialog" id="modal2"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal 2</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-toggle="modal" data-dismiss="modal" data-target="#modal1">Open modal 1</button> </div> </div> </div> </div> </body> </html>

Answer 1

 .modal-body { height: 1000px } #modal2{ overflow-y:auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <button data-toggle="modal" data-target="#modal1">Open modal</button> <div class="modal fade" tabindex="-1" role="dialog" id="modal1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal 1</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-toggle="modal" data-dismiss="modal" data-target="#modal2">Open modal 2</button> </div> </div> </div> </div> <div class="modal fade" tabindex="-1" role="dialog" id="modal2"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal 2</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-toggle="modal" data-dismiss="modal" data-target="#modal1">Open modal 1</button> </div> </div> </div> </div>

If you are talking about workaround here, then you can do something like this 如果您在此处讨论解决方法，则可以执行以下操作

#modal2{
  overflow-y:auto;
}

Here is the working JSFiddle 这是工作中的JSFiddle

引导程序模式中的滚动问题：仅在使用衰落类时

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-05-01 04:57:50

引导程序模式中的滚动问题：仅在使用衰落类时

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-05-01 04:57:50

解决方案1
1 已采纳 2019-05-01 04:57:50