从另一个模态创建模态时，滚动效果不起作用

问题描述

在我的角度应用程序中，使用引导程序在另一个模态内创建了一个模态。首先，您将看到用于加载第一个模态的按钮。现在您可以看到滚动效果。但是如果加载第二个模态并关闭它，则第一个模态的滚动效果将不再起作用。我该如何解决这个问题？ See the example here

这是代码示例，您还可以看到上面的链接：

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Click Me</a>

<div class="modal" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal title</h4>    
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div><div class="container"></div>
        <div class="modal-body">
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it,then this scrolling effect is not working anymore.
          --------------------------------------------------------
          Scrollin effect for this modal is working at the beginning. 
          But if load the 2nd modal and close it,then this scrolling effect is not working anymore.
          --------------------------------------------------------
          <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
      </div>
    </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">2nd Modal title</h4>
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        </div><div class="container"></div>
        <div class="modal-body">
          Content for the dialog / modal goes here.
          Content for the dialog / modal goes here.
          Content for the dialog / modal goes here.
          Content for the dialog / modal goes here.
          Content for the dialog / modal goes here.
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Close</a>
        </div>
      </div>
    </div>
</div>

解决方法

基本上，有两种解决方法：

1. 添加.modal-dialog-scrollable to your modal仅使其内容可滚动，而不是整个容器。看看this fiddle。

<div class="modal" id="myModal">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      ...
    </div>
  </div>

1. 使用属于this answer的“旧”解决方案。看看this fiddle：

$(document).on('hidden.bs.modal','.modal',function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

祝你好运！

,

似乎是，引导程序消除了y方向的溢出。因此，这种解决方案对我有用：

.modal {
    overflow-y: auto !important;
}