打开 bootstrap 模式并根据点击事件滚动到特定 div（动态 jquery）

Question

我有两个或更多基于此的点击事件我想打开 Bootstrap 模态。我的问题是当我使用 jquery 和 Inside modal 打开模态时，我假设考虑了三个部分。在我的点击事件中，我也有三个与模态中的考虑相同。对于我要单击的实例，现在 bootstrap 模态被触发（打开）但它无法获取特定部分的偏移值并且它也不会在模态内滚动。我的唯一意图是基于单击需要滚动 bootstrap 模式并显示特定部分。

这里附上我的Bootstrap模态

代码

<div class="modal fade modal5 in" id="myModal" role="dialog">
<div class="modal-dialog">
    <div class="modal-content modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Testing</h4>
        </div>
        <div class="modal5-body">
            <div class="terms_condition section-1" data-section="section-1" id="section-1">
            <h3>Section One</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <div class="terms_condition section-2" data-section="section-2" id="section-2">
            <h3>Section Two</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <div class="terms_condition section-3" data-section="section-3" id="section-3">
            <h3>Section Three</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div> </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

对于我的点击事件Html代码

<a href="#" data-toggle="modal" data-target="#myModal5" data-section="section-1"> T &amp; C</a>
<a href="#" data-toggle="modal" data-target="#myModal5" data-section="section-2"> T &amp; C</a>
<a href="#" data-toggle="modal" data-target="#myModal5" data-section="section-3"> T &amp; C</a>

我的Jquery应该是这样的

                $(document).on('show.bs.modal', '#myModal5', function(event) {
                    var section = $(event.relatedTarget).data('section');
                    var sectionOffset = $('#' + section).offset();
                     $('#myModal5 .modal5-body').animate({ 
                        scrollTop: sectionOffset.top
                    }, 1000);
                });

Answer 1

您缺少一些要素来完成这项工作：

使用CSS限制.modal-body的高度，因此它开发了自己的滚动条，而不是拥有全高并依赖<body>的滚动条
运行你的 scrollTo fn 在 shown.bs.modal 上，而不是在 show.bs.modal 上。 shown 显示模式后运行，show 模式打开前运行。
考虑 .modal-body 的当前 scrollTop（否则你第二次打开模式时你的 scrollTop 值将是错误的）并使用 .position() instead of .offset().
向部分添加 min-height 以允许部分填充模态高度

工作示例：

$(document).on('shown.bs.modal', '#myModal5', function(event) {
  var section = $(event.relatedTarget).data('section');
  var sectionPosition = $('#' + section).position();
  $('#myModal5 .modal-body').animate({
    scrollTop: $('#myModal5 .modal-body')[0].scrollTop + sectionPosition.top - 15
  }, 1000);
});

.modal-body {
  /* 200px is to avoid scrollbar on body 
   * 198px is min value for current footer + height
   */
  max-height: calc(100vh - 200px);
  overflow: auto;
}
.modal-body [class*="section-"] {
  min-height: calc(100vh - 215px);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<a href="#" data-toggle="modal" data-target="#myModal5" data-section="section-1">Section 1</a> |
<a href="#" data-toggle="modal" data-target="#myModal5" data-section="section-2">Section 2</a> |
<a href="#" data-toggle="modal" data-target="#myModal5" data-section="section-3">Section 3</a>

<div class="modal fade modal5 in" id="myModal5" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Testing</h4>
      </div>
      <div class="modal-body">
        <div class="terms_condition section-1" data-section="section-1" id="section-1">
          <h3>Section One</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="terms_condition section-2" data-section="section-2" id="section-2">
          <h3>Section Two</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="terms_condition section-3" data-section="section-3" id="section-3">
          <h3>Section Three</h3>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>

打开 bootstrap 模式并根据点击事件滚动到特定 div（动态 jquery）

Open bootstrap modal and scroll to specific div based on Click Event (dynamic jquery)

scroll

modal-dialog

click

twitter-bootstrap

bootstrap-modal