Откройте модальное окно bootstrap и прокрутите до указанного c div на основе события щелчка (динамика c jquery)

Question

У меня есть два или более события щелчка, поэтому я хочу открыть модальное окно Bootstrap. Моя проблема заключалась в том, что когда я открывал модальное окно с помощью jquery и внутри модального окна, я полагаю, что рассмотрел три раздела. В моем событии щелчка также есть три таких же, как и в модальном. В случае, когда я собираюсь щелкнуть, теперь модальное окно 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>

для события My Click Html Code

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

My 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

Вам не хватает нескольких элементов, чтобы эта работа работала:

• ограничение высоты .modal-body с использованием CSS, поэтому он создает собственную полосу прокрутки вместо полной высоты и полагаясь на полосу прокрутки <body>
• запустите scrollTo fn на shown.bs.modal, а не на show.bs.modal. shown запускается после того, как модальное окно было показано, show запускается перед открытием модального окна.
• учитывать текущий scrollTop из .modal-body (в противном случае во второй раз вы откроете модальное окно 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>