时间戳

首页 > 解决方案 > 从另一个模态创建模态时，滚动效果不起作用

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

问题描述

在我的角度应用程序中，使用引导程序我在另一个模态中创建了一个模态。首先，您将看到用于加载第一个模式的按钮。现在您可以看到滚动效果。但是如果加载第二个模态并关闭它，那么第一个模态的滚动效果就不再起作用了。我该如何解决这个问题？ 请参阅此处的示例

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

<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.
          --------------------------------------------------------
          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.
          --------------------------------------------------------
          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.
          --------------------------------------------------------
          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>

标签： htmlangulartwitter-bootstrapbootstrap-4bootstrap-modal

解决方案

基本上，有两种选择可以解决这个问题：

  1. 添加.modal-dialog-scrollable到您的模式中，仅使其内容可滚动，而不是整个容器。看看这个小提琴。
<div class="modal" id="myModal">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      ...
    </div>
  </div>
  1. 使用作为此答案一部分的“旧”解决方案。看看这个小提琴：
$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

祝你好运！

推荐阅读