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

Question

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

这里我附上了我的引导模式代码

<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> 的滚动条
• 在shown.bs.modal 上运行你的scrollTo fn，而不是show.bs.modal。 shown 在模态显示后运行，show 在模态打开前运行。
• 考虑.modal-body 中的当前scrollTop（否则第二次打开模式时，scrollTop 的值会出错）并使用.position() 而不是.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>