基于Click事件打开引导模式并滚动到特定的div (动态jquery)

Question

我有两个或更多的点击事件的基础上，我想打开启动模式。我的问题是，当我使用jquery打开模型时，在模型内部，我假设考虑三个部分。在我的点击事件，我也有三个相同的考虑在模态。例如，我要单击，现在启动模式启动(打开)，但它无法获得特定部分的偏移值，也没有在模型内滚动。我的唯一意图是基于点击需要滚动引导模式，并显示特定的部分。

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

<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上运行scrollTo fn。在显示模型后运行shown，在打开模型之前运行show。
• 考虑到当前的.modal-body scrollTop (否则第二次打开模态时，您的scrollTop值将是错误的)，并使用.position()代替min-height对区段填充模态高度H 220F 221

工作实例：

​

$(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>

​